WordPress AJAX 具有数组元素的表单

Question

为了 100% 清楚，我不是在问如何在 WordPress 中使用 ajax...我已经知道该怎么做。

我的问题是我的表单元素的数组名称没有按照我需要的方式解析到 $_POST 变量中。我得到的是 javascript FormData 语法而不是 PHP 语法。

示例...

HTML...

<form id="registerForm">
    <input name="borrower[0][first_name]">
    <input name="borrower[0][last_name]">
    <input name="borrower[1][first_name]">
    <input name="borrower[1][last_name]">
    <button>Submit</button>
</form>

JS...

$('#registerForm').submit(function() {
    var data = $(this).serializeArray();
    // also tried data = new FormData(document.getElementById('registerForm'));
    $.ajax(
        url: ...,
        dataType: 'json',
        data: {
            action: 'some_wp_action',
            formData: data
        },
        success: function(response) {
            console.log(response);
        }
    );
})

PHP...

add_action( 'wp_ajax_some_wp_action', 'some_wp_action' );
add_action( 'wp_ajax_nopriv_some_wp_action', 'some_wp_action' );

function some_wp_action() {
    exit(json_encode($_POST['formData']));
}

输出...

[
    {"name":"borrower[0][first_name]","value":"John"}
    {"name":"borrower[0][last_name]","value":"Doe"}
    {"name":"borrower[1][first_name]","value":"Jane"}
    {"name":"borrower[0][last_name]","value":"Doe"}
]

我需要输出是一个关联数组，就像您只是自然地发布表单数据一样...

[
    {"borrower":[
        {"first_name":"John","last_name":"Doe"},
        {"first_name":"Jane","last_name":"Doe"}
    ]}
]

Answer 1

好的，我想答案就在这里：Convert form data to JavaScript object with jQuery

您需要使用 serializeObject 功能。这是 simple fiddle.

所以你的 js 可能看起来像这样：

$('#registerForm').submit(function() {
    var data = $(this).serializeObject();
    $.ajax({
        url: "submit.php",
        data: {
            action: 'some_wp_action',
            user: data
        },
        success: function(response) {
            $("#msg").html(response);
        }
    });
    return false;
})

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

从您发布的示例中也不清楚为什么您需要明确说明 user[0] 位置只是一个用户，所以我在这个示例中简化了它：

<form action="submit.php" id="registerForm" onsubmit="return false">
    <input name="username">
    <input name="email">
    <input type="password" name="pw">
    <input type="password" name="pw_confirm">
    <button>Submit</button>
</form>

这产生了以下输出：

{"action":"some_wp_action","user":{"username":"asdf","email":"fdsa","pw":"pasasdf","pw_confirm":"pasfdsa"}}

WordPress AJAX 具有数组元素的表单

WordPress AJAX Form With Array Elements

php

ajax

wordpress

form-data