发送 JSON 或数组以提交 POST (jQuery -> PHP)

Question

早上好。 我被这件事困住了： 我正在做一个表单（通过提交按钮，发布将信息发送到其他页面），动态用户可以使用按钮添加一些其他表单组。 好的，这很容易。 但是用户正在制作一些名为“DPT”（工作内容）的东西，它在我的数据库中有一个表，并且还有一个“功能”（要做的事情）表。一个 DPT 可以有一个或多个函数。

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

所以我有一个<div>，我用 jQuery 对它进行了扩充，以便在其中制作一个面板和表单。 我为什么这样做？因为如果一个 DPT 可以有一个或多个函数，我必须存储我正在创建的当前函数的 ID。 然后我有一个添加更多功能的按钮，但我必须存储功能的ID以及它的标题和描述。

因此，使用 jQuery，我可以在“添加功能”按钮之前动态添加一个新表单... 我的想法是创建一个 JSON 并通过 PHP 发送它，但不知道我必须将信息发送到哪里或返回到哪里......

我在这里告诉你我做这件事的重要代码：

<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++;

});

当我点击提交按钮并通过 POST 传递它时，我可以返回一个数组/json 吗？ 类似：

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

?

我向您展示 我在做什么。 还有整个表格：

Answer 1

这是可能的。而且很简单。这是一个例子：

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：

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

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

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

  echo json_encode($arr);
?>