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

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”部分并让浏览器处理发布。您仍然会看到漂亮的“正在处理...”文本。

更好的是，处理表单上的“提交”事件而不是按钮上的“点击”事件:

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

通过这种方式，无论用户是使用按钮还是按键盘上的“enter”提交表单，您都可以获得不错的更新。