通过 jquery 验证插件进行表单验证后的 AJAX 调用答案

【问题标题】：AJAX call after form validation via jquery validation plugin通过 jquery 验证插件进行表单验证后的 AJAX 调用
【发布时间】：2015-03-20 10:51:14
【问题描述】：

我有以下代码

submitHandler: function(form) {
                    $.ajax({
                        url:        GLOBAL_URL + '/searching',
                        data:       $(form).serialize(),
                        type:       'POST'
                    });

                    window.location.href = GLOBAL_URL + '/complete';
                }

我想要做的是当表单在验证后提交时，我希望用户在后台搜索时被重定向到其他页面。

但事实并非如此。它等待 ajax 完成请求，然后重定向。

这个 ajax 在 jquery 验证插件之外工作正常，但现在在里面。我也尝试设置async: true。但没有帮助。

我不希望用户在搜索时等待。我只想在用户提交表单并成功触发 ajax 后立即重定向用户。

帮我解决这个问题。谢谢

【问题讨论】：

添加ajaxComplete()
如果您仍然希望页面重定向，使用ajax() 有什么意义？只需使用标准表单提交即可。
请理解。标准提交将让用户等待，直到服务器给出很长时间的响应。这就是为什么我发送电子邮件作为对他们提交的回复的原因。

标签： jquery ajax jquery-validate

【解决方案1】：

您可以使用成功回调进行重定向。

$.ajax({
    url: GLOBAL_URL + '/searching',
    data: $(form).serialize(),
    type: 'POST'
}).done(function () {
    window.location.href = GLOBAL_URL + '/complete';
});

【讨论】：

先生，我也试过了。我不希望用户在搜索时等待。我只想在用户提交表单并触发 ajax 调用后立即重定向用户。感谢您的回复。
在这种情况下，您可以使用计时器并重定向，例如 setTimeout(function(){ window.location.href = GLOBAL_URL + '/complete'; }, 500)
感谢您的快速回复。这样，它会等待 ajax 完成并额外等待 500 毫秒进行重定向。
@m3huL 仅在 ajax 处理很长时才应使用...在这种情况下，无论 ajax 是否完成
就是这样。 Ajax 处理需要一段时间，因为它调用的 API 很少，并且执行复杂的数据库操作。有什么解决办法吗？

【解决方案2】：

试试这个，

$.ajax({
    url:        GLOBAL_URL + '/searching',
    data:       $(form).serialize(),
    type:       'POST',
    success:     function(response){ // called when you get the response from server
        // you can check the response and redirect your page accordingly
        // for success or error response
        window.location.href = GLOBAL_URL + '/complete';
    }
});

【讨论】：

我不希望用户等到服务器发回响应。这就像火灾和忘记。有什么想法吗？

【解决方案3】：

$("#submit_fund").click(function(){
    $('#frm_add_fund').ajaxForm({
        dataType:  'json',
        success:   test
    });
});

function test(data) {
  if(data.success == 0 ){

  //show the validation error for particular fields//

  }else if( data.success == 1){
         var url = data.url;
    window.location = url.replace('&&', '&').replace('?&', '?');
  }
 }

【讨论】：

你能解释一下吗？
我有使用ajax表单提交，在成功函数中，如果没有验证错误，则重定向。

【解决方案4】：

移除整个 submitHandler 块并为按钮单独添加点击处理程序

$("#yousubmitbtnid").click (function() {

    If ($("#yourformid").valid ()){

                    .ajax({
                        url:        GLOBAL_URL + '/searching',
                        data:      $("#yourformid") .serialize(),
                        type:       'POST'
                    });

                    window.location.href = GLOBAL_URL + '/complete';
    }

});

如果出现问题，改变输入类型提交到按钮抱歉缩进不好。因为我为此使用移动设备

【讨论】：

这与正确答案完全相反。 OP 正在使用the plugin's submitHandler exactly for what it was designed... ajax()。
但是 OP 说 submitHandler 不允许 ajax 异步，他告诉“这个 ajax 在 jquery 验证插件之外工作正常，但现在在里面。我也尝试设置 async:true。但没有帮助”意思是上面代码与 submitHandler 相同，但在外部......并且也是异步的
底线，为了避免冗余和冲突，使用插件的submitHandler for ajax()...这就是它的用途。 OP 显然对这里的ajax() 感到困惑，就好像您只想重定向到新页面一样，您一开始就不会使用ajax()。
我认为是这样，但他希望以并行方式执行重定向和 ajax 调用。这样他将无法获取ajax的响应，但可以在后台发起ajax调用并同时重定向。