第一次单击的jquery ajax表单提交请求不起作用答案

【问题标题】：jquery ajax form submit request with first click is not working第一次单击的jquery ajax表单提交请求不起作用
【发布时间】：2011-01-20 09:40:03
【问题描述】：

大家好，

我正在使用 monorail + jquery 开发一个应用程序，我发现使用 jquery 的 ajax 存在问题。

我有一个将自身提交到 div 容器中的表单，通常工作正常，但每隔一段时间，表单不会在第一次点击时提交，我需要再次点击才能获得它工作

我已使用 Firebug 对其进行了检查，并且请求仍在处理中，如下图所示： http://www.freeimagehosting.net/uploads/c6f500d617.jpg

如果我再次按下提交按钮，则请求被处理。

我使用的代码差不多是这样的：

    $('.formSteps').submit(function () { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function (response) { // on success..
            $('#service_plan_wizard_container').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

正如您可能猜到的，有一个名为 service_plan_wizard_container 的 div，每个带有 formSteps 类的表单都会发生这种情况。

问候

【问题讨论】：

标签： jquery ajax

【解决方案1】：

尝试将此添加到您的代码中：

context: this,

正上方

data: $(this).serialize(), // get the form data

和

var that = this;

在提交触发器下方，然后使用“that”而不是（this）

【讨论】：

我不确定是否会关注你，你的意思是：$('.formSteps').submit(function () { var that = this; $.ajax({ context: this,数据：that.serialize()，类型：that.attr('method')，url：that.attr('action')，成功：function (response) { $('#service_plan_wizard_container').html(response); } }); 返回 false; });我这样做了，提交发生了，但它没有加载到 div 上。

【解决方案2】：

我刚刚遇到了同样的问题。我希望这篇文章能帮到我，但我发现（很少）没有任何帮助。

我已经知道为什么了。

在 ajax 请求中的某处插入：

async: false,

这在一秒钟内完全解决了问题。

顺便说一句，我意识到如果你也将它放入你的 ajax 请求中，你实际上可以在第一次点击时收到一条错误消息：

error: function(er, err, error){
      alert(error);
},

我没有从服务器得到响应的原因不是因为它没有触发，而是因为它返回的是错误而不是“成功”响应。

此外，在调试时，我强烈建议使用 FireBug for Firefox，您可以在 (Net->XHR) 选项卡中监视任何 Ajax 请求。很有帮助！

【讨论】：