Question

注意：我个人更喜欢jQuery而不是$;它打字更多，但我发现它更具可读性。

我有一个简单的表单，允许用户输入他们的姓/名和电子邮件地址。它有一个“保存”按钮，当点击它时，执行：

jQuery('#saveButton').click(function() {
    alert('About to Save to server');

    var validated = validateContact();
    if(!validated) {
        alert('Did not validate!');
        return;
    } else {
        alert('Validated!');
    }

    jQuery().ajax({
        url: "saveContact",
        type:"post",
        dataType: 'json',
        data: {
            contact: {
                firstName: jQuery('#firstName').val(),
                lastName: jQuery('#lastName').val(),
                emailAddress: jQuery('#emailAddress').val()
            }
        },
        success: function(result) {
            jQuery('#firstName').val("");
            jQuery('#lastName').val("");
            jQuery('#emailAddress').val("");
        },
        error: function(xhr){
            alert(xhr.responseText);
        }
    });

    alert('Saved to server');
});

当我点击“保存”按钮时，我会收到几个alert弹出窗口，包括“已验证！”然而，在此之后不久脚本似乎就死了，我从未看到“保存到服务器”警报。这告诉我我的jQuery / AJAX调用很糟糕。此外，当我打开浏览器的开发人员工具时，我没有看到浏览器实际上向我的后端发送网络POST。在控制台中我没有看到任何错误。关于我哪里出错以及为什么我甚至没有看到任何网络活动的任何想法？

Answer 1

将jQuery().ajax替换为jQuery.ajax({...})

Answer 2

代码中的错误：

使用jquery而不是jQuery。
在调用ajax方法时使用jQuery（）而不是jQuery。

JS：

jQuery('#saveButton').click(function () {
    alert('About to Save to server');

    var validated = true; //Changed to temporary value.
    if (!validated) {
        alert('Did not validate!');
        return;
    } else {
        alert('Validated!');
    }

    jQuery.ajax({ //Replaced jQuery() with jQuery
        url: "/saveContact", //Sample URL
        type: "post",
        dataType: 'json',
        data: {
            contact: {
                firstName: jQuery('#firstName').val(), //Replaced jquery with jQuery
                lastName: jQuery('#lastName').val(), //Replaced jquery with jQuery
                emailAddress: jQuery('#emailAddress').val() //Replaced jquery with jQuery
            }
        },
        success: function (result) {
            jQuery('#firstName').val(""); //Replaced jquery with jQuery
            jQuery('#lastName').val(""); //Replaced jquery with jQuery
            jQuery('#emailAddress').val(""); //Replaced jquery with jQuery
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });

    alert('Saved to server');
});

演示：http://jsfiddle.net/lotusgodkk/x2mv94vm/6/

jQuery单击处理程序不执行AJAX POST

2 个答案: