POST（jQuery - > PHP）を送信するJSONまたは配列を送信

Question

おはようございます。 私はこのことにこだわっています： 私はボタンを使って他のフォームグループを動的に追加することができるフォーム（送信ボタン、ポストを介して他のページに情報を送る）をやっています。 これは簡単です。 しかし、ユーザーは私のDBにテーブルを持っている "DPT"（仕事のもの）と呼ばれるものを作っているし、また "機能"（するべきこと）テーブルを持っています。 DPTは1つまたは複数の機能を持つことができます。

Function    
--------- 
id int(4) AI 
title VARCHAR(64) NOT NULL 
description VARCHAR(256) 
dpt int(4) --> FK 
     | 1..* 
     | 
     V 1 
DPT 
----- 
id 
name 
(...) 

だから、私はそれの内側パネルと、フォームを作るためのjQueryを使って膨らま<div>を持っています。 なぜ私はそれをしましたか？なぜなら、DPTに1つまたは複数の関数を持たせることができるのであれば、私は作成している現在の関数のIDを格納しなければならないからです。 その後、私は関数を追加するためのボタンを持っていますが、関数のIDとそのタイトルと説明を格納しなければなりません。

「関数を追加」ボタンの前に新しいフォームを動的に追加することができます... 私の考えはJSONを作成してPHP経由で送信しましたが、どこに情報を送信するかわからない...

に戻るには、私はここのことを行うための私の重要なコードをあなたを聞かせて：私は、送信ボタンをクリックして、POSTを通してそれを通過しないとき

<div id="initialFunction" class="panel panel-default panel-body"> 
<?php 
$nextID = mysqli_fetch_assoc(mysqli_query($con,"SELECT MAX(id_funcion) as siguiente_id from funcion"))['siguiente_id']; 
?> 
<button class="button btn-danger" type="button"> 
    <span class="fa fa-minus"> 
    </span> 
</button> 
</div> 

<script> 

var nextId = <?php echo $nextID?> 
var arrayToPass = {} 
$(function(){ 
    $("#initialFunction").html('<div class="form-group">'+ 
      '<label>Función a desarrollar <sup style="color:red">*</sup></label>'+ 
      '<input class="form-control" name="funcion" type="text" placeholder="Función a desarrollar" maxlength="200" required>'+ 
     '</div>'+ 
     '<div class="form-group">'+ 
      '<label>Tarea principal en esta función <sup style="color:red">*</sup></label>'+ 
      '<textarea class="form-control" name="tarea" placeholder="Enumere las funciones de su puesto de trabajo comenzando por las más representativas, así como las tareas necesarias para el cumplimiento de las mismas" rows="3" required></textarea>'+ 
     '</div>'); 
}); 

$("#bttn-add").click(function(){ 
    $("#bttn-add-function").before(
     '<div class="form-group">'+ 
      '<label>Función a desarrollar <sup style="color:red">*</sup></label>'+ 
      '<input class="form-control" name="funcion" type="text" placeholder="Función a desarrollar" maxlength="200" required>'+ 
     '</div>'+ 
     '<div class="form-group">'+ 
      '<label>Tarea principal en esta función <sup style="color:red">*</sup></label>'+ 
      '<textarea class="form-control" name="tarea" placeholder="Enumere las funciones de su puesto de trabajo comenzando por las más representativas, así como las tareas necesarias para el cumplimiento de las mismas" rows="3" required></textarea>'+ 
     '</div>'); 
     nextId++; 

}); 

は、私は、配列/ JSONを返すことはできますか？ のようなもの：

$("#guardar_dpt").click(function(){ 
    return json_object 
}) 

？

私はあなたに何をしているかを示します。 も全フォーム：

Answer 1

可能です。そして簡単です。 // API：ここでは一例です：

HTML：

<script src="https://unpkg.com/jquery"></script> 
<form id="myForm" method="post"> 
    <input type="text" name="first"><br> 
    <input type="text" name="last"><br> 
    <input type="submit" value="Send"> 
</form> 

<p id="output"></p> 

JS：

function parseAnswer (data) { 
    var content 

    content += 'Name: ' + data.first + '<br>' 
    content += 'Surname: ' + data.last 

    $('#output').text(Name) 
} 

$('#myForm').on("submit", function (evt) { 
    var data = $(this).serialize() 

    evt.preventDefault() 
    $.post('any.php', data, parseAnswer) 
}) 

PHP：あなたは[アヤックス]（HTTPを使用するように

<?php 
    header("Content-type: application/json"); 

    $first = $_POST['first']; 
    $last = $_POST['last']; 

    $arr = ['first' => $first, 'last' => $last]; 

    echo json_encode($arr); 
?>