0

我不知道为什么这个jQuery功能不起作用。这很简单，结果应该很明显。我已经对html和php文件进行了几次测试，以验证它们是否正常工作。问题肯定出在这个函数上。

功能

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {         
          $('#errors').text(data);          
    });
});

现在我通过在不同的地方放置警报来测试这个功能。如果我把这段代码放进去

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();

    alert (email + password); // inserted this line

    $.post('sign_in.php', { email: email, password: password }, function(data) {         
          $('#errors').text(data);          
    });
});

然后我会收到一个警报框，其中包含来自我的电子邮件和密码文本输入的值。但是，如果我像这样在 $.post 函数中向下移动警报

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {
         alert ('hi'); // never shows up
         alert (data); // never shows up        
         $('#errors').text(data);       
    });
});

如评论中所述，警报从未显示，提交表单后页面刷新，我留在原始页面上，就像没有发生任何事情一样，“错误”div 从未收到任何消息。我的第一个想法是，也许我的html文件中有另一个字段，其 id 为“email”、“password”或“sui”，但我没有，这些都是唯一的 id。然后我检查了该php文件是否实际上正在返回数据，并且确实如此。如果您想查看相关的 html 和 php 代码，我将展示它。无论如何，感谢您的帮助，感谢您的关注

4

1 回答 1

2

看起来您正在将事件处理程序绑定到表单提交按钮。$.post问题似乎是在有机会处理响应之前提交了表单。

您想要做的是阻止表单提交。

尝试这个：

$('#sui').submit(function (e) {      // added 'e' to catch the jQuery event
    e.preventDefault();             /* prevent the default action from happening, 
                                       in this case submitting the form */
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {
         alert ('hi'); // never shows up
         alert (data); // never shows up        
         $('#errors').text(data);       
    });
});

顺便说一句，我建议使用jQuery jqXHR Promise接口：

$.post('sign_in.php', { email: email, password: password })
    .done(function(data) {
        // success
    })
    .fail(function(jqXHR, status, error) {
        // error
     });

此外，我个人更喜欢console.log()与开发人员工具（Chrome 和 IE 中的 F12）一起使用进行调试，而不是alert()因为大多数现代浏览器都可以检查对象。

.fail()例如，如果您想查看 jqXHR 对象在方法中的样子，alert(jqXHR)将显示Object [Object]，而console.log(jqXHR)将显示整个 jqXHR 对象。

于 2013-07-24T18:01:01.077 回答