Question

我有一个表单，当我的用户点击“提交”时，我首先想要检查他们选择的用户名是否已被采用。我用ajax：

function submit() {
    if (userNameTaken()) {
        alert("Please choose a username that is not already in use.");
        return false;
    }
}

function userNameTaken() {
    var taken = false;
    var username = $("#username").val();
    $.get("username_used.cgi", { "username": username }, function(data) {
        taken = data > 0;
    });
    return taken;
}

所以我知道当使用用户名时，函数userNameTaken()确实返回true。

然而，表格几乎保存，就好像javascript没有暂停并等待这个ajax调用完成，而是继续继续并评估。有关如何解决此问题的任何想法，以便我的表单将等待此ajax调用而不提交？

Answer 1

您不能从这样的Ajax调用返回数据：Ajax调用在任意未来时间返回，而对userNameTaken()的调用（当然）立即返回，当然在Ajax请求完成之前。

您可能会使呼叫同步，但可能会导致浏览器UI停止。 IMO不是首选。

或者，如果名称未使用，则仅允许提交：使用回调函数设置“ok”标志，或启用提交按钮，或弹出警报，或者......

FWIW，我发现弹出警报非常具有破坏性，并且与平稳的用户体验相抵触。

Answer 2

您需要将Ajax调用的“async”设置设置为“false”。这将强制函数阻塞，直到调用返回。

以下是JQuery文档的链接。查看“异步”设置： http://api.jquery.com/jQuery.ajax/

Answer 3

因为Ajax不会在正常的自上而下的过程中执行。并且提交不会等待ajax响应。您可以使用normal button代替submit button，以便手动提交表单。

<form ... >
// other parts

<input type="button" value="sumbit" onclick="userNameTaken();"/>
</form>

将代码更改为

function userNameTaken() {
    var username = $("#username").val();
    $.get("username_used.cgi", { "username": username }, function(data) {
       if(data > 0){
          alert("Please choose a username that is not already in use.");
        }else{
            // validation goes here
           $('form').submit(); 
        }
    });
}

因此，如果未使用的用户名显示警告，它将检查ajax响应并提交表单。您可以使用jquery来为按钮和表单添加一些id来轻松处理它。

ajax打电话不等

3 个答案: