jQuery - 將多維表單數據發送到 PHP 腳本

Question

我有一個 jQuery 腳本，每當某個.class輸入發生變化時， .class會將隱藏的輸入添加到表單中。 根據用戶輸入，它為其他不可編輯的列生成值，這些列也作為隱藏輸入推送到表單中。

表單輸出如下所示：

<input type="hidden" name="[1008016BSTL][1][part]" value="1008016BSTL" />
<input type="hidden" name="[1008016BSTL][1][price]" value="123" />
<input type="hidden" name="[1008016BSTL][1][priceExVat]" value="102.50" />
<input type="hidden" name="[1008016BSTL][1][fee]" value="10.53" />
<input type="hidden" name="[1008016BSTL][1][profit]" value="68.41" />

這只是我試圖捕獲的一組數據，但其他數據相同，保存原始密鑰和子密鑰。

我的表單包裝器如下所示：

<form method="post" id="submit-form" enctype="multipart/form-data">
    <input type="submit" value="Save" />
</form>

我的 AJAX 看起來像：

$('form#submit-form').submit(function(e)
{
    e.preventDefault();

    let data = $('form#submit-form').serializeArray();

    $.ajax({
       url: '/save-pricing.php',
       data: {data: JSON.stringify(data)},
       type: 'post',
       success: function(res)
       {
           console.log(res)
       },
       error: function(res)
       {
           alert('Error! I won\'t tell you what it is. But, I\'ll give you a clue: 21');
           console.log(res)
       }
   })
})

我也試過（用於設置數據）：

let data = $('form#submit-form').serialize();
data = JSON.stringify(data);

$.ajax({
    ...
    data: {data: data}
    ...
})

以及省略.stringify()函數。

這在 PHP 中是這樣的：

<?php
    echo '<pre>'. print_r($_POST, 1) .'</pre>';

    /**
     * Below is for .serialize() -> output is an empty array
     *
     * parse_str($_POST['data'], $postData)
     * echo '<pre>'. print_r($postData, 1) .'</pre>';
     */

使用.serializeArray()簡化輸出（只是刪除其他集合.serializeArray() ：

Array
(
    [data] => [
        {"name":"[1008016BSTL][1][part]","value":"1008016BSTL"},
        {"name":"[1008016BSTL][1][price]","value":"123"},
        {"name":"[1008016BSTL][1][priceExVat]","value":"102.50"},
        {"name":"[1008016BSTL][1][fee]","value":"10.53"},
        {"name":"[1008016BSTL][1][profit]","value":"68.41"}
    ]
)

這是好的，我猜，我大概可以按名稱，合並到一個數組，但感覺像它應該已經做到這一點與.serialize()對jQuery的一邊，然后parse_str()在PHP端。

然而，正如我所提到的， parse_str()和.serialize()產生一個空數組，我不能使用。

所以我的問題是：如何通過 jQuery 成功地將多維表單數據發送到 PHP？

編輯

添加：

dataType: 'json'

使用.serialize()然后JSON.stringify(data) ，刪除parse_str()並輸出：

Array
(
    [\"] => Array
    (
        [1008016BSTL] => Array 
        (
            [1] => Array
            (
                [part] => 1008016BSTL
            )
        )
    )
)

Answer 1

serializeArray 沒有很好地處理帶括號的輸入字段名稱。 下面的代碼將創建一個適當的多維數組，您可以將其發送回服務器。

$('form#submit-form').submit(function(event)
{
    event.preventDefault();
    //Prevent the form from submitting

    var fields = {};
    //This is where you're gonna store your form fields

    $.each($('form#submit-form').serializeArray(), function(i, field) {
        //Get values, even from multiple-selects
        if (Array.isArray(fields[field.name])) {
            fields[field.name].push(field.value);
        } else if (typeof fields[field.name] !== 'undefined') {
            var val = fields[field.name];
            fields[field.name] = new Array();
            fields[field.name].push(val);
            fields[field.name].push(field.value);
        } else {
            fields[field.name] = field.value;
        }
    });
    //Now all the fields are in the fields object

    //You're now going to translate "key[subkey]" string to key[subkey] object
    for (var key in fields) {
        var parts = key.split(/[[\]]{1,2}/);
        parts.length--;
        if (parts.length) {
            var val = fields[key];
            delete fields[key];
            addToTree(fields, parts);
            setToValue(fields, val, parts);
        }
        //input field array names (with brackets) are mistakenly treated as strings, this fixes it
    }


    $.ajax({
        url: '/save-pricing.php',
        data: JSON.stringify(fields),
        contentType: 'application/json',
        type: 'post',
        success: function(res) {
            console.log(res)
        },
        error: function(res) {
            alert('Error! I won\'t tell you what it is. But, I\'ll give you a clue: 21');
            console.log(res)
        }
    })
});

/**
 * Adds values to a tree.
 * @link https://stackoverflow.com/questions/3663096/how-to-convert-array-to-tree
 */
function addToTree(tree, array) {
    for (var i = 0, length = array.length; i < length; i++) {
        tree = tree[array[i]] = tree[array[i]] || {}
    }
}

/**
 * Sets object values.
 * @link https://stackoverflow.com/questions/13719593/how-to-set-object-property-of-object-property-of-given-its-string-name-in-ja
 */
function setToValue(obj, value, path) {
    for (i = 0; i < path.length - 1; i++) {
        obj = obj[path[i]];
    }
    obj[path[i]] = value;
}

在 PHP 端使用json_decode ：

$data = json_decode(file_get_contents('php://input'), true);
echo '<pre>'. print_r($data, 1) .'</pre>';

Answer 2

對於您的特定問題，您可以使用jquery.serializeJSON

這是他們的 github https://github.com/marioizquierdo/jquery.serializeJSON的鏈接

這將創建正確的 json 對象。

Answer 3

這是我針對這種情況的最簡單的解決方案。

<?php if(isset($_POST["data"])) {

    $post_data = urldecode($_POST["data"]);

    parse_str($post_data, $form_data);

    // this will give you first element of array by eliminating double quote key ('') in post data array, which is also desired
    $form_data = reset($form_data);

    echo '<pre>'; print_r($form_data); echo '</pre>'; exit;

} else { ?>

<form method="post" id="submit-form">
    <input type="hidden" name="[1008016BSTL][1][part]" value="1008016BSTL" />
    <input type="hidden" name="[1008016BSTL][1][price]" value="123" />
    <input type="hidden" name="[1008016BSTL][1][priceExVat]" value="102.50" />
    <input type="hidden" name="[1008016BSTL][1][fee]" value="10.53" />
    <input type="hidden" name="[1008016BSTL][1][profit]" value="68.41" />
    <input type="submit" value="Save" />
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $("#submit-form").on('submit', function(e){
        e.preventDefault();
        var form_data = $("#submit-form").serialize();
        $.ajax({
            type: "POST",
            data: {data: JSON.stringify(form_data)},
            success: function(res){
                console.log(res);
            }
        });
    });
</script>

<?php } ?>