【问题标题】:submit form does not stop in jquery ajax call提交表单不会在 jquery ajax 调用中停止
【发布时间】:2019-12-31 16:37:13
【问题描述】:

我得到以下代码:

$.ajax({
    type: "POST",
    async: false,              
    url: "CheckIdExist",
    data: param,
    success: function(result) {
        if (result == true){
            return false;
        }                                 
    },
    error: function(error) {
        alert(error);
        return false;
    }
});

如果ajax返回值为true,表单需要停止提交。

但它不会停止提交表单。

请帮忙。

【问题讨论】:

    标签: jquery forms submit


    【解决方案1】:

    在这种情况下,您需要执行同步 http 请求,即您必须将 the async option 设置为 false。
    在您的版本中,httpxmlrequest 是异步的。它可能会在您的 onsubmit 处理程序返回并且在 onsubmit 处理程序的上下文之外调用 onsuccess 回调很久之后完成。
    “return false”将是匿名函数 function(result) {... } 的返回值,而不是 onsubmit 处理程序的返回值。

    【讨论】:

      【解决方案2】:

      您需要进行回调。

      This entry in the FAQ 在我遇到这个确切问题时帮助了我很多。

      getUrlStatus('getStatus.php', function(status) {
          alert(status);
      });
      
      function getUrlStatus(url, callback) {
          $.ajax({
              url: url,
              complete: function(xhr) {
                  callback(xhr.status);
              }
          });
      }
      

      原因是不能在 AJAX 函数中返回。

      由于异步编程的性质,上述代码无法按预期工作。提供的成功处理程序不会立即调用,而是在将来某个时间从服务器接收到响应时调用。所以当我们在 $.ajax 调用之后立即使用 'status' 变量时,它的值仍然是未定义的。

      【讨论】:

        【解决方案3】:

        您不能将此代码放在函数中或表单的 onsubmit 中,成功函数将其结果返回到 jQuery ajax 上下文,而不是表单提交上下文。

        【讨论】:

        • 部分问题,但主要问题是 ajax 函数是异步的,因此无法返回值,因为代码执行不等待此函数完成。
        【解决方案4】:

        我假设你有类似的东西:

        form.submit(function(event) {
            $.ajax(...);
        });
        

        你想return false(或调用event.preventDefault())在事件处理函数本身,而不是在AJAX调用中,如:

        form.submit(function(event) {
            event.preventDefault();
            $.ajax(...);
        });
        

        【讨论】:

        • 优秀 - 使用 event.preventDefault() 解决了我的问题,并在用户单击表单上的按钮时阻止了页面刷新。谢谢 DarkWulf!
        【解决方案5】:

        我也遇到了这个问题,但是通过将输入 type="submit" 更改为 type="button" 解决了这个问题,然后只做你的 ajax 请求

           $("input#submitbutton")
            {
                                  $.ajax(
                                {                         type: "POST",
                                     async: false,              
                                    url: "CheckIdExist",
                                     data: param,
                                    success: function(result) {
                                         if (result == true){
                                            //TODO: do you magic
                                         }                      
                                         else
                                          $("form").submit();           
                                     },
                                     error: function(error) {
                                        alert(error);
                                        return false;
                                    }
                                });
            });
        

        【讨论】:

          【解决方案6】:

          这个问题的一个细微变化是: 我想使用 jquery 和 ajax 向用户显示错误消息, 但如果没有错误则进行正常处理。

          假设方法“check”返回一个响应,如果没有错误则为空,如果有错误则包含错误。

          然后你可以在你的 ready 函数中做这样的事情:

          $("#theform").submit(function() {
              var data = { ... }
              $.get('/check', data,
                  function(resp) {
                      if (resp.length > 0) {
                          $("#error").html(resp);
                      } else {
                          $("#theform").unbind('submit');
                          $("#theform").submit();
                      }
              });
              event.preventDefault();
          });
          

          那么,它是如何工作的?当外部提交函数被触发时,它会构建 AJAX 调用所需的数据(这里是更高级别的函数 get)。调用被调度,操作的主线程立即继续,但提交被无条件停止,所以没有明显的事情发生。

          一段时间过去了,AJAX 调用返回了请求的结果。如果非空,则向用户显示结果。

          但是,如果响应为空,则提交函数未绑定。这可以防止系统通过外部提交函数进行额外调用。调用内部提交函数。这会触发对表单目标的实际表单提交,并且生活会按预期进行。

          【讨论】:

          • form.unbind('submit') -- 太棒了!比form.trigger('submit', [something]) 干净得多,这对我来说无论如何都不起作用。
          • 我使用谷歌根据我的表单输入之一进行异步地理编码调用,并根据地理编码设置其他值。表格总是在地理编码完成之前提交。 form.unbind 真的很有用,解决了我的问题。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-08-31
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多