Question

我有一个包含多个组字段的表单。这是通过ajax发布的。一切都还好。我只需要创建一个数组将其发送到后端。我正在使用serializeArray（）。可能是发送数据的错误形式。这就是我发错的原因

<form method="post" id="tasks-multiform">
<div id="people-container">
    <h3>Person 1:</h3>
    <p>
        <label>First name</label><br>
        <input name="people[1][first_name]">
    </p>

    <p>
        <label>Last name</label><br>
        <input name="people[1][last_name]">
    </p>

    <p>
        <label>Email</label><br>
        <input name="people[1][email]">
    </p>

    <h3>Person 2:</h3>
    <p>
        <label>First name</label><br>
        <input name="people[2][first_name]">
    </p>

    <p>
        <label>Last name</label><br>
        <input name="people[2][last_name]">
    </p>

    <p>
        <label>Email</label><br>
        <input name="people[2][email]">
    </p>
</div>

<a href="javascript:;" id="add-new-person" class="add-new-person">Add! new person</a>

<p>
<input type="submit" value="Save">
</p>
</form>

上面是表单，数据通过ajax发布。下面是jquery codes..avoid action其wp后端函数

jQuery(document).on('submit', '#tasks-multiform', function(e){
e.preventDefault();
var form = jQuery('form#tasks-multiform');
var data = form.serializeArray();
console.log(data);
jQuery.ajax({
    type : 'post',
    url : admin_ajax.ajax_url,
    data : {
        action : 'utasks',
        tasksdata : data,
        tasksnums : tasksnums,
    },
    beforeSend : function(){
        jQuery('.tasksubmit').attr('disabled', 'disabled');
    },
});
});

我想要一些像：

{"1"=>
    {
       "first_name"=>"", 
       "last_name"=>"", 
       "email"=>""
    }, 
 "2"=>
    {
       "first_name"=>"", 
       "last_name"=>"", 
       "email"=>""
    }
 }

但我得到的是：

{"1"=>
    {
       "[prople][1][first_name]"=>"", 
    }, 
 "2"=>
    {
       "[prople][1][last_name]"=>"", 
    }, 
 "3"=>
    {
       "[prople][1][email]"=>"", 
    }, 
 "4"=>
    {
       "[prople][2][first_name]"=>"",
    } 
 "5"=>
    {
       "[prople][2][last_name]"=>"", 
    } 
 "6"=>
    {
       "[prople][1][email]"=>""
    }
 }

我该如何解决这个问题？

Answer 1

您可以先使用reduce()函数（see this solution）开始。然后，您只需使用循环来获取数据。

示例：

var data = form.serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});

有了这个，你得到这个数据：

{
    "people[1": {
        "first_name": "Lorem",
        "last_name": "L",
        "email": "lorem@example.com"
    },
    "people[2": {
        "first_name": "Ipsum",
        "last_name": "I",
        "email": "ipsum@example.com"
    }
}

现在你可以在你的对象中循环，或找到一个变通方法来获得漂亮的索引，而不是people[1，people[2，..或一个对象数组。

Answer 2

您也可以使用FormData：

formData = new FormData(jQuery('form#tasks-multiform')[0]);
formData.append("action", "utasks");
formData.append("tasksnums", tasksnums);

然后在data : formData参数中使用.ajax()发送。

另一个选择是看看这个serialize object plugin。

希望这有帮助！

jQuery Ajax to php获取结构化数组

2 个答案: