如何使用 jQuery $.post() 將數組發送到 PHP

Question

我想使用 jQuery 的 $.post() 將數據發送到 PHP 頁面， $_POST _ $_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>

Answer 1

您的 html 輸入必須具有如下名稱：

• name="text" -> 用於 "name" 輸入

• 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);
});

Answer 2

$.serialize() 是不錯的選擇。 但有時你想傳遞小集合，而不是整個表單輸入。 （順便說一句，我建議使用 lodash 或下划線庫進行過濾）

$.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);
});

Answer 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>