我的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

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

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

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

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

请参阅HTTP响应代码列表，了解备选方案列表，并通过此问题了解有关使用401的论证。

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

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

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

试试这个。。。