jquery - ASP.NET MVC jQuery AJAX 调用 Action 方法太晚了？

Question

我在外部 Javascript 文件中有一些 jQuery 代码，这些代码正在对 Controller 中的操作方法进行 ajax 调用。外部 Javascript 文件中的代码如下。最终会调用操作方法，但没有及时调用。当我在操作方法中设置断点时，直到提交按钮单击返回 false 后才会调用它。当EmailExist函数返回“isvalid”时，isvalid未定义。

所以这不是最终调用操作方法的问题，只是出于某种原因不会调用EmailExist 总是返回未定义，并且在返回按钮单击之前不会调用MVC Action 方法。有什么想法吗？

操作方法:

        [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult EmailExist(string email)
    {
        Account account = _generalService.GetAccountByEmail(email);

        bool exist = false;
        if (account != null)
            exist = true;

            return Json(new { indb = exist });
    }

Javascript:

$(document).ready(function() {
$("input[type=submit]").click(function() {

    var valid = true;

    // email - check required and valid

    var email = $("input[name='email']");
    var emailtrim = jQuery.trim(email.val());

    // email exists in db ajax request
    if (EmailExist(emailtrim)) {
        valid = false;
    }

    return valid;
})

function EmailExist(emailval) {

    var isvalid;

    // hit db
    $.ajax(
    {
    type: "POST",
    url: "/Account/EmailExist",
    data: { 'email': emailval },
    success: function(result) {

        if (result.indb) {
            isvalid = true;

        }
    },
    error: function(error) {
        alert(error);
    }
});

    return isvalid;
}

});

Answer 1

看起来您希望请求是同步的。要实现此目的，您需要将请求上的 async 选项设置为 false。默认情况下，请求是异步的，以便您在请求完成之前从 ajax 调用返回。或者，您可以重写代码，以便成功回调真正完成工作。后者对于 AJAX 来说更惯用——但有时可能更复杂。

$.ajax(
    {
    type: "POST",
    async: false,              // <- note addition
    url: "/Account/EmailExist",
    data: { 'email': emailval },
    success: function(result) {

        if (result.indb) {
            isvalid = true;

        }
    },
    error: function(error) {
        alert(error);
    }
});

或者

$("input[type=submit]").click(function() {

    // email - check required and valid

    var form = $(this).parent('form');
    var email = $("input[name='email']");
    var emailtrim = jQuery.trim(email.val());

    SubmitIfNoEmailExists(form,emailtrim);

    return false;
});

function SubmitIfNoEmailExists(form,emailval) {

    // hit db
    $.ajax({
        type: "POST",
        url: "/Account/EmailExist",
        data: { 'email': emailval },
        success: function(result) {
            if (!result.indb) {
               form.submit();
            }
        },
        error: function(error) {
            alert(error);
        }
    });
}

编辑:根据您的评论，您可能还想看看使用 jQuery validation plugin作为满足您所有验证需求的解决方案。