Question

当我点击我的登录按钮时，它只是因某种原因重新加载页面。它应该从我的php页面提醒我回显的字符串。

这是我的login.js代码：

$(document).ready(function(){
    $('#login').click(function(){


        $('#msgLoginStatus').show();
        $('#msgLoginStatus').html("processing...");

        $.post('login.php',{username:"bob",password:"pass"}, function(data){
            alert(data);
        });
    });

});

我的login.php：

<?php 
    echo "message";
?>

和我的表格：

          <form id="loginForm" action="" method="post">
             <fieldset id="body">
                        <fieldset>
                            <label for="username">Username</label>
                            <input type="text" name="username" id="username" />
                        </fieldset>
                        <fieldset>
                            <label for="password">Password</label>
                            <input type="password" name="password" id="password" />
                        </fieldset>
                        <button id="login">login</button>
                        <label for="checkbox"><input type="checkbox" id="checkbox"     />Remember me</label>
                        <br />
                        <p id="msgLoginStatus" style="display:none"></p>
                    </fieldset>
                    <span><a href="#">Forgot your password?</a></span>
                </form>

浏览器控制台中没有错误。我也尝试使用$ .ajax，它返回了一个错误，我尝试将错误变量放入警报中，但是当它被警告时，它是一个空字符串。任何人都有错误的想法？

Answer 1

您的登录按钮有不明确的操作 - 像这样添加type="submit"：

<button id="login" type="submit">Login</button>

现在，如果你真的想用JavaScript执行一个明确的POST，请调用e.preventDefault，这样浏览器的自动“提交”操作就会被禁止。

e.preventDefault();
$.post(...);

但让表格提交自己可能会更好。为此，请在表单中指定正确的action="login.php"属性：

<form id="loginForm" action="/login.php" method="post">

在登录按钮上保留现有的“点击”处理程序，只需删除“$ .post”部分，然后让浏览器处理发布。你仍然会得到漂亮的“处理......”文字。

更好的是，处理表单上的“submit”事件而不是按钮上的“click”事件：

$('#loginForm').submit(function(e) {
  $('#msgLoginStatus').show();
  $('#msgLoginStatus').html("processing...");
});

这样，无论用户是使用按钮提交表单还是按键盘上的“输入”，您都可以获得更好的更新。

Answer 2

尝试：

$('#login').click(function(e){
    e.preventDefault();
    $('#msgLoginStatus').show();
    $('#msgLoginStatus').html("processing...");

    $.post('login.php',{username:"bob",password:"pass"}, function(data){
        alert(data);
    });
});

这可以防止发生“正常”提交（我认为这就是您没有收到任何错误的原因）。

请参阅http://api.jquery.com/event.preventDefault/

Answer 3

将e.preventDefault();添加到clck处理程序（并将处理程序中的事件对象作为e）。

Answer 4

或者您可以设置按钮类型='按钮'而不是提交。这也将运行你的代码

<button id="login" type="button">Login</button>

这样您就不必停止浏览器的事件

使用JQuery / AJAX将html表单数据作为JSON发送到PHP

4 个答案: