使用 jQuery 的带有元素数组的 Ajax POST HTML 表单

Question

我的表格如下所示：

<form id="invite-form" method="post" action="" >
 <input type="text" name=friends[0][first_name] />
 <input type="text" name=friends[0][last_name] />
 <input type="text" name=friends[0][email] />

 <input type="text" name=friends[1][first_name] />
 <input type="text" name=friends[1][last_name] />
 <input type="text" name=friends[1][email] />

 <input type="text" name=friends[2][first_name] />
 <input type="text" name=friends[2][last_name] />
 <input type="text" name=friends[2][email] />

 <input type="submit" value="Invite" />
</form>

这是我的 JavaScript 代码：

var friends = [];
    jQuery("#invite-form").serializeArray().map(function(x){friends[x.name] = x.value;});
    var formData = {
        'friends'    : JSON.stringify(friends),
        'action'   : 'invite-friends'
    };
    jQuery.ajax({
        type        : 'POST',
        url         : '/invitation.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    }).done(function(data){
        console.log(data);
        if(data.success == true){
        ...

它无法正常工作，好友列表也无法正确发布。如何正确地将这种形式转换为json数据？我希望能够将这些数据用作常规数组，就像它是已发布的常规形式一样。我可以使用 php://input 获取需要解析的数据，但无法使用 $_POST 访问它。

Answer 1

通过这种方式，您可以提交带有序列化数据的表单，并且您可以使用 发布或获取此方法或任何其他方法的请求。

jQuery("#invite-form").submit(function(e) {
   e.preventDefault();
   let data = jQuery(this).serialize();
    jQuery.ajax({
                type: "get",
                url: 'invitation.php',
                data: data,
                cache: false,
                success: function(data){
                    console.log(data);
                }
            });
 });