拦截表单 POST 字符串并改为通过 AJAX 发送答案

【问题标题】：Intercept form POST string and send via AJAX instead拦截表单 POST 字符串并改为通过 AJAX 发送
【发布时间】：2012-08-30 01:47:21
【问题描述】：

是否可以截取表单的 POST 字符串并改为通过 AJAX 发送？我可以使用 $('form').submit() 来拦截 POST 事件，但我看不到可以从哪里获取 POST 字符串。我可以从表单的输入中重现字符串，但这似乎很可疑。

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

// capture submit
$('form').submit(function() {
     var $theForm = $(this);

     // send xhr request
     $.ajax({
         type: $theForm.attr('method'),
         url: $theForm.attr('action'),
         data: $theForm.serialize(),
         success: function(data) {
             console.log('Yay! Form sent.');
         }
     });

     // prevent submitting again
     return false;
});

请注意，正如Phil 在他的评论中所说，.serialize() 不包括提交按钮。如果您还需要设置提交按钮的值，则必须手动添加。

【讨论】：

请注意，serialize() 将不包括单击提交表单的按钮。这可能是要发送的重要数据，特别是如果按钮具有name 属性

【解决方案2】：

你当然可以这样做——你阻止你的表单像往常一样提交，你获取它的数据并通过 jQuery 执行POST：

$(form).submit(function(event){

    // prevents default behaviour, i.e. reloading the page
    event.preventDefault();

    $.post(

        $(this).attr('action'), // the form's action
        $(this).serializeArray(),   // the form data serialized
        function(data)
        {

            // what you are supposed to do with POST response from server

        }

    )

});

【讨论】：

你可能想要serialize()，而不是serializeArray() 用于jQuery.post()
serializeArray() 一直对我有用 - 我使用它是因为 serialize() 忽略了 urlencoded 字符串中的文本区域，但这可能是几个 jquery 之前的事情，现在 serialize() 也可以使用。

【解决方案3】：

使用.serialize()，它将一组表单元素编码为字符串以供提交。

$('form').serialize()

【讨论】：