如何使用Jquery AJAX post方法传递多维数组？

Question

我一直在使用 Serialize() 方法来传递带有 Post() 的复选框表单数据，以实现可以容纳同一类别多个物品的购物篮。

当我使用提交按钮进行提交时，它可以正常工作，并且可以传递多个值，并在一个类别下显示。

然而，当我使用 Jquery serialize() 方法时，它只会显示每个类别下的一个物品，并且总共只有两个类别。这是一个数组问题，但我无法解决它。

是否有其他的 JQuery 函数可以用来传递多维数组？

- user1337603

---

结构长什么样？ - wanovak

你能展示一些代码吗，特别是你的<form>和<input>的名称？ - Isaac Gonzalez

Answer 1

Jquery可以直接处理多维数组，无需进行序列化。

var data = {
  foo:  123,
  bar:  456,
  rows: [
    {
      column1 : 'hello',
      column2 : 'hola',
      column3 : 'bonjour',
    },
    {
      column1 : 'goodbye',
      column2 : 'hasta luego',
      column3 : 'au revoir',
    },
  ],
  test1:{
    test2: {
      test3:  'baz'
    }
  }
};

在您的PHP文件中，提交的数据将如下所示

Array
   (
    [foo] => 123
    [bar] => 456
    [rows] => Array
        (
            [0] => Array
                (
                    [column1] => hello
                    [column2] => hola
                    [column3] => bonjour
                )

            [1] => Array
                (
                    [column1] => goodbye
                    [column2] => hasta luego
                    [column3] => au revoir
                )

        )

    [test1] => Array
        (
            [test2] => Array
                (
                    [test3] => baz
                )

        )

    )

一旦你定义了多维数组，你的Ajax可能就很简单了

$.ajax({
          type:           'post',
          cache:          false,
          url:            './ajax.php',
          data:           data
      });

如果你的post数组可能有你不知道的字段，你可以轻松地在你的php文件中访问你的Post数组：

$data = file_get_contents('php://input');
$data = json_decode($data, true);

- Branden S. Smith

---

嗯，你的例子没有使用多维数组。多维数组是数组的数组（例如：[["苹果"，"橘子"]，["香蕉"，"梨子"]]）。但是，你使用的是单维数组的对象。 - Bob Quinn

Answer 2

我没有找到任何好的解决方案，所以我使用了 JSON.stringify(); 来解决这个问题。以下是我的代码：

客户端代码：

var data = {a:{'foo':'bar'},b:{'this':'that'}};
$.ajax({ url        : '/',
         type       : 'POST',                                              
         data       : {'data':JSON.stringify(data)},
         success    : function(){ }
       });

服务器端：

$data = json_decode($_POST['data']);
print_r($data);
// Result:
// Array( "a" => Array("foo"=> "bar"), "b" => Array("that" => "this"))

- Maddy

Answer 3

这对我有用，使用jQuery和laravel 8，构建（递归地）一个对象而不是数组：

function getSorted(wrapper) {
    let set = {};
    let children = $(wrapper).children('.list-group');
    let index = 0;

    children.each(function(i, item) {
        $(item).children('.list-group-item').each(function(j, section) {
            index++;
            set[index] = {};
            set[index].id = $(section).data('id');
            set[index].subsections = getSorted($(section));
        });
    });

    return set;
}

用通常的方式通过ajax发送它：

let orderingSet = getSorted($('#sections')); // recursive function for all sections

$.ajax({
    type: 'POST',
    url: sortUrl,
    dataType: 'json',
    data: {'id': sectionId, 'to_id': parentId, 'orderingSet': orderingSet}
})

我会帮忙翻译，以下是需要翻译的内容：

从请求中检索出来：$orderingSet = request('orderingSet');

这是服务器响应的显示方式（仅为创建上述特定数字索引作为拖放位置的部分‘数组’的多维数组）：

- Mariana Marica

Answer 4

$.post(url, {"myarray":arrayData}, function(data){/*stuff*/}, 'json');

服务器端，您可以使用PHP等语言进行访问。

$myArray = $_POST['myarray'][0];
foreach($myArray as $item)
{
   /*logic here for picking apart your array*/
}

- chris

Answer 5

来自jQuery文档：

为了将表单元素的值包含在序列化字符串中，该元素必须具有名称属性。仅当复选框和单选按钮（类型为“radio”或“checkbox”的输入）被选中时，才包括其值。

首先检查您的代码是否符合要求。如果没有看到您的代码，很难提供更进一步的帮助。

- Aaron

Answer 6

$.ajax({
    type:   'post',
    cache:  false,
    url:    './ajax.php',
    data:   { arrayData }
});

您必须使用{}来包含{ arrayData }变量。

然后echo $_POST[arrayData];将产生Array。如果不是，则不会发送数组值。

- Varkery

Answer 7

这是我的元代码片段，对我来说运行得很好...

    var f={};  

    f.text = "SOME DATA";
    f.any_other_field = some_other_value;
    f.items = [];

    $("#droppable .or").each(function(ee){
          var tmp={};
          tmp.id    = $(this).data("cid");
          tmp.name  = $(this).find(".ornazev").text();
          tmp.price = $(this).data("price");
          tmp.currency = $(this).data("currency");
          tmp.ks    = 1;  
          f.items.push(tmp);
    });
    $.ajax({
      type: "POST",
      url: urlsave,
      data: {"f":f},
      dataType: "text",
.....

- hugo