运行AJAX失败代码的PHP AJAX登录表单

问题描述

我对PHP有点陌生，并尝试创建AJAX PHP登录表单，当我运行代码时，控制台会从PHP代码中记录正确的“ login good”和“ login fail”回显，但会在jQuery ajax代码。它确实在网络XHR中显示状态200。我已经看了过去问题和其他教程中的代码，但是看不到与我编写的代码有所不同的内容。非常感谢您提供帮助解决问题。

<form method="post" id="loginForm">
<div class="form-group">
    <label>Username</label>
    <input type="text" name="username" id="username" class="form-control" placeholder="Enter Username" autocomplete="off">
</div>
<div class="form-group">
    <label>Password</label>
    <input type="password" name="password" id="password" class="form-control" placeholder="Password" autocomplete="off">
</div>
<button type="submit" name="submit" class="btn btn-primary" id="loginSubmit">Submit</button>   </form>




$(function () {    
$("#loginForm").submit(function (e) {
   e.preventDefault();
   var form_data = $(this).serialize(); 
   $.ajax({
      type: "POST",url: "login.php",dataType: "json",// Add datatype
      data: form_data
   }).done(function (data) {
        if(data.status == "1") {
        alert("good");
        } else {
        alert("something went wrong")
        }
   }).fail(function (data) {
      console.log('fail');
      console.log(data);
   });
}); 
});


<?php
session_start();

$username = "username";
$password = "password";

$msg = '';

if(isset($_POST['username']) && isset($_POST['password'])) {
    if($_POST['username'] == $username && $_POST['password'] == $password) {
        $_SESSION['username'] = $username;
        echo 'login good';
        echo "<script>location.href='welcome.php'</script>";
    } else {
        $msg = 'Please enter correct username or password.';
        echo 'Login fail';
    }
}

？>

解决方法

这是因为您告诉AJAX数据类型将为JSON，但是，如果失败或成功，您将返回文本。 我将您的代码固定如下：

<?php
session_start();
$username = "username";
$password = "password";
$msg = '';
if (isset($_POST['username']) && isset($_POST['password'])) {
    if ($_POST['username'] == $username && $_POST['password'] == $password) {
        $_SESSION['username'] = $username;
        die(json_encode(['status' => true,'redirect' => 'welcome.php']));
    } else {
        die(json_encode(['status' => false,'redirect' => '']));
    }
} else { ?>

    <form method="post" id="loginForm" action="">
        <div class="form-group">
            <label>Username</label>
            <input type="text" name="username" id="username" class="form-control" placeholder="Enter Username"
                   autocomplete="off">
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" name="password" id="password" class="form-control" placeholder="Password"
                   autocomplete="off">
        </div>
        <button type="submit" name="submit" class="btn btn-primary" id="loginSubmit">Submit</button>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
        $(function () {
            $("#loginForm").submit(function (e) {
                e.preventDefault();
                var form_data = $(this).serialize();
                var url = $(this).attr('action');
                $.ajax({
                    type: "POST",url: url,dataType: "json",// Add datatype
                    data: form_data,success: function(res) {
                        console.log(res);
                        if (res.status == true) {
                            window.location.href = res.redirect;
                        }else {
                            alert('error logging in');
                        }
                    },error: function(error) {
                        console.log(error.responseText);
                    }
                });
            });
        });
    </script>
    <?php
}

请注意，我在同一HTML页面中添加了PHP代码