Jquery Ajax POST 功能无法成功运行答案

【问题标题】：Jquery Ajax POST function not working successfullyJquery Ajax POST 功能无法成功运行
【发布时间】：2014-05-26 10:35:52
【问题描述】：

我正在使用 jQuery Ajax 对按钮单击事件进行验证。如果返回值为 1，则此方法显示警告消息，否则返回 true 并转到按钮方法。该验证和警报显示事物和阻止按钮方法工作正常。如果不想做任何事情并返回 true 来点击按钮方法是行不通的。

这是我的 jQuery ajax 方法。

$(function () {
    $('#customerSubmit').on('click', function (event) {

        debugger;
        event.preventDefault();
        var title = $('#Title').val();
        var firstName = $('#FirstName').val();
        var phoneNo1 = $('#PhoneNo1').val();
        var Email = $('#Email').val();
        var address1 = $('#AddressLine1').val();

        $.ajax({
            type: 'POST',
            url: '/Customer/IsExistCustomer',
            data: { FirstName: firstName, Title: title, PhoneNo1: phoneNo1, AddressLine1: address1, Email: Email },
            success: function (data) {
                if (data == 1) {
                    alert('This Customer Already Exist');
                    return false;
                }
                else {
                    return true;
                }
            }
        });
    });
});

请帮我解决这个问题，

谢谢。

【问题讨论】：

标签： jquery ajax

【解决方案1】：

您不能从异步操作同步返回。

这是一个关于一般问题的良好 QA：How do I return the response from an asynchronous call?

对于您的具体问题，您应该使用按钮而不是提交元素并在回调中执行操作（提交表单）：

$(function () {
    $('#customerSubmit').on('click', function (event) {
        var form = this.form; // <- depends on your DOM
        var title = $('#Title').val();
        var firstName = $('#FirstName').val();
        var phoneNo1 = $('#PhoneNo1').val();
        var Email = $('#Email').val();
        var address1 = $('#AddressLine1').val();
        $.ajax({
            type: 'POST',
            url: '/Customer/IsExistCustomer',
            data: { FirstName: firstName, Title: title, PhoneNo1: phoneNo1, AddressLine1: address1, Email: Email },
            success: function (data) {
                if (data == 1) {
                    alert('This Customer Already Exist');
                }
                else {
                    form.submit(); // <- now submit the form
                }
            }
        });
    });
});

【讨论】：

这个问题应该作为重复问题关闭还是其他问题对具体问题的回答不够？

【解决方案2】：

您的代码中存在一些问题：

您正试图从异步函数返回一个值。当调用 'success' 时，启动 ajax 调用的函数已经终止。
如果您处理单击按钮，用户仍然可以通过在字段中键入 ENTER/RETURN 键来提交表单。您应该改为处理表单的“提交”事件。

恕我直言，您应该拦截“提交”事件处理程序 preventDefault()，并执行 ajax 调用以提交您的表单，并处理错误以向用户提供某种反馈。

如果您绝对想向服务器发出两个请求而不是一个（一个用于检查，一个用于提交），您可以在“成功”处理程序中进行第二次 ajax 调用：

    $.ajax({
        type: 'POST',
        url: '/Customer/IsExistCustomer',
        data: { FirstName: firstName, Title: title, PhoneNo1: phoneNo1, AddressLine1: address1, Email: Email },
        success: function (data) {
            if (data !== 1) {
                $.ajax({
                    type: $(form).attr("method"),
                    url: $(form).attr("action"),
                    data: $(form).serialize(),
                    success: function (data) {

                    }
                });
            }
        }
    });

【讨论】：