JSON响应显示为true↵，长度错误

Question

I am new to AJAX and making a simple login system with AJAX and PHP. My JSON response shows as true↵ with length 6. Where is the problem, and how can I solve it?

AJAX

$('document').ready(function() {
  $("#login-form").on("submit", (function(e) {
    e.preventDefault();
    var data = $("#login-form").serialize();

    $.ajax({
      type: 'POST',
      url: 'login-response.php',
      data: data,

      success: function(response) {
        console.log(response.length);

        if (response == true) {
          $("#btn-login").html('<img src="btn-ajax-loader.gif" /> &nbsp; Signing In ...');
          setTimeout(' window.location.href = "demo.php"; ', 4000);
        } else {
          $("#error").fadeIn(1000, function() {
            $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; ' + response + ' !</div>');
            $("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In');
          });
        }
      }
    });
  }));
});

login-response.php

session_start();
$user_email = $_POST['user_email'];
$user_password = $_POST['password'];

if ($user_email == 'admin' && $user_password == '123') {
    $_SESSION['user_session'] = $user_email;
    echo json_encode(true);
}
else {
    echo "email or password does not exist."; // wrong details
}

Answer 1

As per my comment: json_encode(true) will not return a valid JSON. Instead, you will want to encode an array of sorts. There are many ways to do it, but one way is to simply encode an array that is ['success' => true], in other words:

session_start();
$user_email = $_POST['user_email'];
$user_password = $_POST['password'];

if ($user_email == 'admin' && $user_password == '123') {
    $_SESSION['user_session'] = $user_email;
    echo json_encode(array('success' => true));
}
else {
    echo json_encode(array('success' => false, 'message' => 'email or password does not exist.'));
}

Note that you should also encode your failure message, because your jQuery expects to receive something in JSON.

Once you receive this response in your jQuery logic, you can simply check if the response has a success object with the value of true, i.e.:

$.ajax({
    type: 'POST',
    url: 'login-response.php',
    data: data,
    dataType: 'json'
})
.done(function(response) {
    if (response.success) {
        $("#btn-login").html('<img src="btn-ajax-loader.gif" /> &nbsp; Signing In ...');
        setTimeout(' window.location.href = "demo.php"; ', 4000);
    } else {
        $("#error").fadeIn(1000, function() {
            // Your error message is accessible via `response.message`
            $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; ' + response.message + ' !</div>');
            $("#btn-login").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In');
        });
    }
});

Some notes:

• Request status is accessible via response.success. Of course, depending on personal preference, you may have alternatives in returning exit status, such as using an exit code (0 indicates ok, anything other than 0 means an error)
• Your failure response message will be accessible via response.message

p/s: Remember that the jqXHR.success method is deprecated! Use jqXHR.done() instead ;)