提交表单在jQuery Ajax调用中没有停止

Question

I got following code :

$.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，则表单需要停止提交。

但它没有停止提交表单。

请帮忙。

- Ray

Answer 1

我假设你有类似这样的东西：

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

在事件处理函数中，您希望使用return false（或调用event.preventDefault()），而不是在 AJAX 调用中使用，例如：

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

- DarkWulf

---

太好了 - 使用event.preventDefault()解决了我的问题，并且在用户单击表单上的按钮时防止了页面刷新。感谢DarkWulf！ - David Conlisk

Answer 2

这个问题的一个小变化是：

我想使用jquery和ajax向用户展示错误信息，但如果没有错误，则进行正常处理。

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

那么你可以在准备就绪的函数中执行以下操作：

$("#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 调用返回请求的结果。如果不为空，则将结果显示给用户。

然而，如果响应为空，则提交函数被解除绑定。这可以防止系统通过外部提交函数进行额外的调用。内部提交函数被调用。这将触发实际的表单提交到表单的目标，生活按预期继续。

- Jim Penny

---

form.unbind('submit') -- 太棒了！比起 form.trigger('submit', [something]) 要干净得多，而且对我来说也没有用。 - a paid nerd

我正在使用谷歌来基于表单的某个输入进行异步地地理编码调用，并根据地理编码设置其他值。但表单总是在地理编码完成之前提交。form.unbind非常有用，解决了我的问题。 - joshcartme

Answer 3

你需要做一个回调。

这篇FAQ中的文章在我遇到同样问题时帮了我很多忙。

getUrlStatus('getStatus.php', function(status) {
    alert(status);
});

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

这是因为在 AJAX 函数中无法返回。

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

- Ólafur Waage

Answer 4

我也遇到了这个问题，但是通过将输入类型 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;
                            }
                        });
    });

- Patrik Potocki

Answer 5

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

- VolkerK

Answer 6

你不能把这段代码放在一个函数或表单的onsubmit事件中，成功函数返回它的结果返回到jQuery ajax上下文，而不是表单提交上下文。

- cgp

---

问题的一部分，但主要问题是ajax函数是异步的，因此不能返回值，因为代码执行不等待此函数完成。 - Sylverdrag