将 jQuery.ajax 数据同时发送到表单提交答案

【问题标题】：Sending jQuery.ajax data simultaneous to a form submit将 jQuery.ajax 数据同时发送到表单提交
【发布时间】：2011-02-18 23:22:12
【问题描述】：

我有一个难题。我有一个包含许多字段的表单。有一个链接字段，您可以在其中输入链接，单击添加按钮，然后链接（使用 jQuery）被添加到链接数组中。我希望在提交表单时通过 jQuery.ajax 方法发送这个数组。如果我像这样使用 $.ajax 发送链接数组：

    $.ajax({
        type: "POST",
        url: "add_stock",
        dataType: "json",
        data: { "links": link_array }
        });

when the add link button is selected the data goes no problem to the correct place and gets put in the db correctly.如果我使用 $(#stock_form).submit(..... 将上述函数绑定到提交表单按钮，则发送其余的表单数据，但不发送 link_array。

我显然可以将链接数组传回 HTML 中的隐藏字段，但随后我必须将数组解压缩为逗号分隔的值，并在 PHP 中将逗号分隔的字符串分开。在 PHP 中解压缩 Javascript 数组似乎要容易 100 倍，而无需大惊小怪。

那么，如何使用 $.ajax 并发从 javascript 将数组发送到 HTML 中的 $_POST 数据的其余部分？

请注意，我使用的是 Kohana 3.0 框架，但实际上这不应该有什么不同，我想做的是将此 js 数组添加到已经开始的 $_POST 数组中。

谢谢！

【问题讨论】：

标签： php javascript jquery html ajax

【解决方案1】：

如果您真的想提交表单（例如，刷新页面等），您唯一的选择是在表单中添加一系列 <input type='hidden'> 字段，名称为 links，并分别填写数组中的值之一。那么你在另一端得到的基本上就是你通过上面的$.ajax 调用得到的。

如果您只想将数据发送到服务器，但实际上不需要提交表单，您可以在表单上使用serialize 为其获取 URL 编码的字符串，然后将链接附加到字符串的结尾，并通过ajax 发送。 类似的东西：

// Assuming 'link_array' is present
var data, n;

data = [$('#TheFormID').serialize()];
for (n = 0; n < link_array.length; ++n) {
    data.push("links=" + encodeURIComponent(link_array[n]));
}

$.ajax({
    type: "POST",
    url: "add_stock",
    dataType: "json",
    data: data.join("&")
});

我们从serialize 获取 URL 编码字符串的开头，用它初始化一个数组，然后为上面的每个链接推送编码字段。然后我们使用Array#join 将所有内容收集到一个字符串中，以便通过ajax 调用发送。（如果您愿意，您可以使用字符串 concat 来执行此操作，但是在一定数量的元素之后，使用数组构建这些长字符串会更快，并且会使整个“我是否在其上放置 &”只是失败自然也是。）

【讨论】：

嘿 TJ，非常感谢您的选择。很好的答案。你给了我很好的信息。希望其他人有一天会发现这很有用。干杯！
对此的一个有趣的补充可能是：stackoverflow.com/questions/452066/… - 将链接作为数组传递给我的 PHP 脚本似乎是合乎逻辑的，如 Jonathan Sampson 的回答所示。

【解决方案2】：

使用 jQuery 的 serializeArray 或 serialize function 会有更好的运气，然后添加你拥有的额外字段，最后使用 .ajax 提交 POST 数据。

【讨论】：