我的 AJAX 查询未正确验证

Question

这里是网页设计的新手。我有一个登录表单，可以在 php 中验证并完美运行，但是当我尝试使用 ajax 进行验证时它不起作用。当我运行页面时，它说无论输入到表单中都是成功的。我已经尝试了好几天，试图让它以许多不同的方法进行验证。如果有更好的方法请告诉我！

这里是php，与登录表单在同一页面上

if (isset($_POST['login'])) {

    $email = mysqli_real_escape_string($con, $_POST['email']);
    $password = mysqli_real_escape_string($con, $_POST['password']);
    $result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $email. "' and password = '" . md5($password) . "'");

    if ($row = mysqli_fetch_array($result)) {
        echo json_encode('true');
        $_SESSION['usr_id'] = $row['id'];
        $_SESSION['usr_name'] = $row['name'];
        $_SESSION['logged_in'] = true;


    } else {
        echo json_encode('false');
        $errormsg = "Incorrect Email or Password!!!";
    }
}


?>

$(document).ready(function() {
  $('#login_submit').click(function() {
      var form = $('#login_form').serialize();
    $.ajax({
        type: "POST",
        url: "header.php",
        data: form,
        success:function (response){
                
                alert('Hi');
        
        },
        error: function(response){
                
                alert('Nope');
            
        }
          
        
   });
 });
});

<form id="login_form" form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="loginform">
                
                <label class="login_form_labels"> Email:</label>
                
                <input type="email" id="email" class="login_input" name="email"><br><br>
                
                <label class="login_form_labels"> Password:</label>
                
                <input type="password" id="password" class="login_input" name="password"><br>
                
                <div id="stay_log">
                    Stay logged in.
                    
                    <input type="checkbox" name="stayLoggedIn" value=1 id="checkbox_1">
                    
                </div>
                
                
                <input class="login_form_btn" name="login" value="Submit" type="Submit" id="login_submit">
                
                <button class="login_form_btn" type="button">Forget your Password?</button>

            </form>

请帮忙！

Answer 1

在您的 ajax 中将 dataType 设置为 Json，如下所示

$.ajax({
    type: "POST",
    url: "header.php",
    dataType: json,
    data: form,
    success:function (response){
            alert('Hi');
    },
    error: function(response){
            alert('Nope');
    }
});

试试这个……

Answer 2

我认为您需要来自服务器端的纯 JSON 响应并在您的 ajax 成功方法中处理它。

在您的 PHP 代码中。

$response=array();
if (!empty($_POST)) {
    $email = mysqli_real_escape_string($con, $_POST['email']);
    $password = mysqli_real_escape_string($con, $_POST['password']);
    $result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $email. "' and password = '" . md5($password) . "'");

    if ($row = mysqli_fetch_array($result)) {
        echo json_encode('true');
        $_SESSION['usr_id'] = $row['id'];
        $_SESSION['usr_name'] = $row['name'];
        $_SESSION['logged_in'] = true;


        $response['type']="success";
        $response['message']="Login done successfully";


    } else {
        $response['type']="error";
        $response['message']="Incorrect Email or Password!!!";
    }
}
else
{
    $response['type']="error";
    $response['message']="invalid post request";
}

ob_clean();
echo json_encode($response);
die();

从服务器通过上述方式，您只能以 json 格式响应。

在你的ajax调用javascript代码

$(document).ready(function() {
  $('#login_submit').click(function() {
      var form = $('#login_form').serialize();
    $.ajax({
        type: 'post',
        url: $('#login_form').attr("action"),
        data: form,
        dataType:'json'
        success:function (response){
                if(response.type=="success")
                {
                    alert(response.message);
                    // write code for handle your success login;
                }
                else
                {
                    alert(response.message);
                    // write code for handle your failure login;

                }

        },
        error: function(response){

                alert('Nope');

        }


   });
 });
});

您必须在 ajax 成功响应中处理来自服务器端的 JSON 响应

Answer 3

在 jQuery/AJAX 中，HTTP 响应代码终止它是否成功。因此，如果登录失败，您应该在 PHP 中设置一个标头来指示此失败。

if (.. login has failed .. ) {
  // HTTP 401 = 'Unauthorized'.
  http_response_code(401);  
}

通过这样做，您甚至不必处理生成的 JSON，只需获取更多信息即可。但基本结果足以告诉您：如果调用了success 回调，则登录成功。如果调用了error，无论出于何种原因，它都没有成功。

这设置了您的基本流程，然后您可以解析结果消息以查看正在发生的任何细节（内部服务器错误、用户未知、密码不匹配等）。

请参阅List of HTTP response codes，了解替代列表，this question 了解有关使用 401 的论证。

Answer 4

首先使用 alert(response) 找出您得到的响应。应该是真还是假。

成功：函数（响应）{

            if(response === "true") 
           {
               alert("hi");
           }
           else
           {
             alert("nope");
           }
    },