将对象附加到序列化表单数据

Question

所以我有一个看起来像这样的对象，可以说它叫做

obj

:

var obj = [{
    "cella": "test1",
    "cellb": "test2 ",
    "cell3": "test3"
}]

现在我想使用 AJAX 将其与序列化表单数据一起 POST 到 PHP 控制器。我遇到的问题是如何实际传递数据。我试过了：

{
    "json object": obj
}

并且：

data: "json object=" + obj + $("#form").serialize(), 

但是我无法以正确的格式发布表单数据和对象。我应该将表单数据添加到对象中吗？

Answer 1

您可以使用

data

将对象（请注意，它与 JSON 无关）连同序列化表单数据一起提供给

$.ajax

请求的

$.param

属性。试试这个：

var obj = [{
    "cella": "test1",
    "cellb": "test2 ",
    "cell3": "test3"
}]

$.ajax({
    url: 'your-php-page.php',
    type: 'POST',
    data: $('#form').serialize() + '&' + $.param(obj[0]),
    success: function(returnedData) {
        console.log('it worked');
    },
    error: function(xhr, status, error) {
        console.log('it didnt work, you can check the passed in parameter to debug');
    }
});

工作演示

请注意，演示显示了将参数化对象附加到序列化表单的输出。

请注意，对于对象数组，您需要循环遍历它们，在每次迭代时附加到序列化形式，如下所示：

function buildQuerystring() {
    var qs = $('#form').serialize();
    for (var i = 0; i < obj.length; i++) {
        qs += '&' + $.param(obj[i]);
    }
}

// in the $.ajax call:
data: buildQuerystring(),

Answer 2

在序列化表单之前，附加一个输入元素

var obj = [{
  "cella": "test1",
  "cellb": "test2 ",
  "cell3": "test3"
}];

  obj.map(item => {
    $("#form").append(`<input type="hidden" name="cella" value="${item.cella}"/>`);
    $("#form").append(`<input type="hidden" name="cellb" value="${item.cellb}"/>`);
    $("#form").append(`<input type="hidden" name="cell3" value="${item.cell3}"/>`);
  })