如何通过 $.post 将 javascript 对象数组发送到 php 脚本？

Question

我的页面上有一个数据表。这些列是“开始”、“结束”、“注释”和“选项”。选项列中有一个用于删除行的按钮，以及一个使表中的行可编辑的按钮。这允许更改“start”、“end”和“comment”的值。再次单击它即可完成编辑过程。最后，有一种方法可以向表中添加另一行。所有这一切都按预期进行。

我想在底部添加一个按钮，用于根据表中的数据创建一个数组，如下所示（表示为 JSON 纯粹是为了便于向 SO 显示：不需要）：

[
    {
        "start"     :"2009/08/01",
        "end"       :"2009/08/08",
        "comment"   :"an example date.",
    },
    {
        "start"     :"2009/07/01",
        "end"       :"2009/07/08",
        "comment"   :"another example date, a month earlier.",
    },
    {
        "start"     :"2000/07/01",
        "end"       :"2000/07/08",
        "comment"   :"another example date, a year earlier. You get the idea.",
    }
]

我应该不会在构建时遇到太多麻烦数组，但是一旦有了，如何将其发布到后端 php 脚本（然后使用 put_csv() 将数据写入文件）？理想情况下，它将以数组格式在服务器端提供，以允许验证。

如果需要的话，我很乐意使用 jquery。

Answer 1

如何将其结束到服务器取决于您想要归档的内容。如果您想加载一个将处理数据的新页面，您可以使用带有隐藏输入的常用表单。或者，如果您想通过 AJAX 在后台进行处理，请使用 jQuery.ajax 正如 CRasco 所说。无论使用哪种方式，都需要将结构化数组转换为简单的键/值列表。

一种选择是生成 JSON 文档（我认为 jQuery 没有为此提供功能，但您可以轻松找到一些东西）并在序列化文档中使用单个字段。然后在服务器端，您将使用 json_decode 来取回数组。如果您使用 AJAX 方法，jQuery.ajax 调用中的数据选项将包含：

{
    'data': '[{"start":"2009/08/01","end":"2009/08/08","comment":"an example date."},...'
}

更好的方法是将其序列化为 PHP 本身可以理解的格式的字段列表。这意味着您无需执行任何特殊操作，$_POST['data'] 将包含该数组。例如：

{
    'data[0][start]': '2009/08/01',
    'data[0][end]': '2009/08/08',
    'data[0][comment]': 'an example date.',
    'data[1][start]': '2009/07/01',
    'data[1][end]': '2009/07/08',
    'data[1][comment]': 'another example date, a month earlier.',
    ... 
}

如果您使用表单方法，则需要生成如下输入字段：

<input type="hidden" name="data[0][start]" value="2009/08/01" />

Answer 2

我肯定会使用 jQuery。这是 $.post() 函数的页面。

http://docs.jquery.com/Ajax/jQuery.post

一个警告是$.post() 是 $.ajax() 函数的包装器，它经过简化，并且消除了您为除成功帖子之外的任何内容设置回调的能力。对于通过 AJAX 进行的重要事务，我将使用：

http://docs.jquery.com/Ajax /jQuery.ajax

一个例子是：

$.ajax({
      url: "script.php",
      global: false,
      type: "POST",
      data: ({id : this.getAttribute('id')}),
      dataType: "html",
      success: function(msg){
         alert(msg);
      }
   });