WordPress AJAX表单与数组元素


WordPress AJAX Form With Array Elements

为了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"}
    ]}
]

好的,所以我认为答案在这里:使用jQuery 将表单数据转换为JavaScript对象

您需要使用serializeObject函数。这是一把简单的小提琴。

所以你的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"}}