Question

我已经制作了一个表格来注册一个新帐户。在这种形式中，我正在检查所选的电子邮件是否可用，但我正在检查使用网络服务需要几秒钟。让我们看看那个漂亮的方法：

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(email) == true) {
        var status;
        $.ajax({
            type: "POST",
            url: "ajax/checkEmail.php",
            data: "email="+email,
            async: false,
            cache: false,
            timeout: 30000
        }).done(function( data ) {
            $(".spinner").hide();
            status = msg;
        });
        return status;
    }
}

我被迫将异步设置为false，除非该函数没有等待我的ajax完成并且没有返回任何内容。使用async：false，他会这样做，但我的整个前端都被阻止，直到加载结束（我的鼠标被阻止，我无法填充任何其他字段）。

我确定我不是第一个遇到这种情况的人，所以我指望你们这些伙伴:-)！

谢谢！

Answer 1

你永远不会像你一样return AJAX方法的结果，而是通过回调并保持async:true

function validateEmail(email, callback) {
...
...
}).done(function( data ) {
    $(".spinner").hide();
    status = data;
    callback(status);
});

你的回调

function doWork(status) {
    console.log(status);
}

你怎么称呼它：

validateEmail(email, doWork);

Answer 2

尝试

$。当（AjaxCall的）。然后（功能（响应）{}）

Answer 3

你可以使用承诺：

<script>
$.postData = function(url, form_data) {
    return $.ajax({
        url: url,
        type: 'POST',
        data: form_data,
        dataType: 'json'
    }).promise();
};
$.postData("your_url", "your_form_data").then(function (data) {
    // do whatever you have to do with data
});
</script>

Answer 4

使用异步方法，但让return函数启用“Submit”按钮（或等效的）。

function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(email) == true) {
        var status;
        $.ajax({
            type: "POST",
            url: "ajax/checkEmail.php",
            data: "email="+email,
            timeout: 30000
        }).done(function( data ) {
            //move your result processing here
            checkResult(data);
        });
        return status;
    }
}

function checkResult(svcdata) {
     $(".spinner").hide();
     status = msg;
    //code here to check the result value and enable further action
    if (svcdata.approved) {  
        $("#submitid").attr("disabled",false);
    } else {
        $("#submidid").attr("disabled",true);
        //other alerting methods (highlight field, refocus, etc)
    }
}

同步ajax方法

4 个答案: