Question

我不知道为什么这个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代码，我将展示它。无论如何，任何帮助表示赞赏，谢谢你看看

Answer 1

看起来您正在将事件处理程序绑定到表单提交按钮。问题似乎是在$.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对象。

jQuery $ .post函数失败

1 个答案: