如何使用 jQuery $.post() 将数组发送到 PHP答案

【问题标题】：How to send array to PHP using jQuery $.post()如何使用 jQuery $.post() 将数组发送到 PHP
【发布时间】：2016-05-30 12:39:10
【问题描述】：

我想使用 jQuery 的 $.post() 将数据发送到 PHP 页面，$_POST 结果如下所示：

Array
(
    [text] => Some String
    [numbers] => Array
        (
            [0] => 9
            [1] => 4
        )

)

成为numbers 数组的信息是动态生成的，所以我不知道它将包含多少个元素。所以，我必须将这些信息收集到一个 JavaScript 数组中。

到目前为止，我有这个 jQuery 代码：

$.post("http://some.url/page.php",
{
    text: $("#string").val(),
    numbers: $("#container input").val() //This is obviously wrong!
}).done(function (result)
{
    $("#result").html(result);
});

如何从#container 中的input 元素中获取值到numbers: 点的数组中，以获取$_POST 数组中的数组？

编辑： HTML 看起来像这样：

<input type="text" name="text" id="text">
<div id="container">
    <label id="9"><input type="hidden" value="9">You added no. 9!</label>
    <label id="4"><input type="hidden" value="4">You added no. 4!</label>
    <!-- These inputs are dynamically added with a whole other function -->
</div>

【问题讨论】：

尽可能发布您的 html
好吧，.val() 返回一个字符串，所以也许$("#container input").val().split(" ")，如果你有用空格分隔的数字？
在post之前处理$("#container input")的内容，提取出需要的值后发送。
为此使用 $("formName").serialize()

标签： javascript php jquery arrays

【解决方案1】：

您的 html 输入必须具有如下名称：

name="text" -> 用于“姓名”输入
name="numbers[]" -> 用于两个“数字”输入

所以html：

<form class="form">
    <input type="text" name="text" id="text">
    <div id="container">
        <label id="9"><input  name="numbers[]" type="hidden" value="9">You added no. 9!</label>
        <label id="4"><input  name="numbers[]" type="hidden" value="4">You added no. 4!</label>
        <!-- These inputs are dynamically added with a whole other function -->
    </div>
<form>

当尝试序列化您的表单输入时：

$.post("http://some.url/page.php",
{
  data: $('.form').serialize(),
}).done(function (result)
{
    $("#result").html(result);
});

【讨论】：

是的！你是这个问题的赢家！更具体地说，我试过$.post("http://some.url/page.php",$("#form").serializeArray()) //etc.

【解决方案2】：

$.serialize() 是不错的选择。但有时您想传递一小部分，而不是整个表单输入。（顺便说一句，我建议使用 lodash 或 underscore 库进行过滤）

$.map() 可以是一个选项。

$.post("http://some.url/page.php",
{
    text: $("#string").val(),
    numbers: $("#container input").map(function() { return $(this).val(); }) // now numbers = [ "9", "4" ]
}).done(function (result)
{
    $("#result").html(result);
});

【讨论】：

【解决方案3】：

首先，您需要一个简单的文本字段来发送文本

<input type='text' name='text' />

对于数组，您需要文本字段数组。你可以像这样声明它并根据需要复制它。

<input type='text' name='numbers[]' />

现在您只需使用代码序列化表单即可发送数据

var data = $(this).serialize();

最终代码将如下所示。

JavaScript/Ajax 代码：

$(document).ready(function () {
    $("#myform").on("submit", function (e) {
        e.preventDefault();

        var data = $(this).serialize();
        $.post("yourdomain.com/action.php", data, function (response) {
            /* callback on success */
        });
    });
});

HTML 代码如下所示

<form id="myform" action="action.php">
    <inpu type="text" name="text" />
    <inpu type="text" name="numbers[]" />
    <inpu type="text" name="numbers[]" />
    <inpu type="text" name="numbers[]" />
    ..
</form>

【讨论】：