PHP & AJAX 得到响应但不加载新页面

Question

您好，我正在使用 AJAX 将用户名和密码传递给 php 页面，一旦识别出用户名和密码存在，我想加载页面 main.html。

在我提交表单的那一刻，我得到了真正的响应，这显示在错误消息标签位置的表单上方，但它没有加载 main.html 页面。

我是新手，所以不太确定哪里出了问题，我已经在 chrome web 开发人员控制台中运行了代码，但没有显示任何问题，希望有人能指出我正确的方向。

页面网址：http://goo.gl/7QGrnr

HTML 代码

 <label id="errorMessage"></label>
 <form  name="login" class="login">
   <input name="username" type="text" placeholder="Username"/>
   <input name="password" type="text" placeholder="Password"/>
   <input type="submit" name="login" class="login" value="Login" id="orange"/>
 </form>

AJAX 代码

$(document).ready(function(){
  $('form.login').submit(function () {
    var username = $("[name='username']").val();
    var password = $("[name='password']").val()
    // ...
    $.ajax({
  type: "POST",
  url: "login.php",
  data: "username="+ username +"& password="+ password,
  success: function(response){
    if(response == 'true') {
          window.location.href='main.html';
        }
        else {
          $("#errorMessage").html(response);
        }   
      }
    });
return false;
  });
});

PHP 代码

           $username = mysql_real_escape_string($_POST['username']);
           $password = md5(mysql_real_escape_string($_POST['password']));

           if(!empty($username) && !empty($password))
            {
           $result = mysql_query("SELECT * FROM users WHERE username='$username' and  password ='5d503cf3064551d1bae24d5e2aaedbd9'");
           $num_rows01 = mysql_num_rows($result);
            if($num_rows01 === 1)
            {
              echo 'true';
            }
              else
            {
              echo 'false';
            }
          }

Answer 1

这是一个直截了当的问题，只要正确调试 JS，就可以轻松解决。让我教你一个简单的技巧。在您的 JS 中，在所有重要位置插入断点。代码在每个断点处停止，然后您可以看到状态。在这种情况下，我们必须确定代码是否进入成功场景。我们插入一个断点如下：

    success: function(response){
 debugger;
             if(response == 'true')
                    {
                         window.location.href='main.html';
                    }
                    else
                    {
                        $("#errorMessage").html(response);
                    }   
            }

如果代码进入成功场景，它应该会触发调试器。然后您可以查看每个变量的状态并立即定位问题。 从长远来看，这个小技巧会帮助你，相信我！

希望这能解决您的问题。

Answer 2

我会使用 jQuery 的而不是 return false

e.preventDefault();

Answer 3

从

更改 PHP

echo 'true';

到

echo json_encode(array('response'=>'true'));

从 Javascript 更改

function(response){
  if(response == 'true')
  {
    window.location.href='main.html';
  }

到

function(data){
  if(data.response == 'true')
  {
    window.location.href='main.html';
  }
  else
  {
    $("#errorMessage").html(data.response);
  } 

将 datatype:'json' 添加到 ajax 调用

$.ajax({
  type: "POST",
  url: "login.php",
  datatype: "json",
  data: "username="+ username +"& password="+ password,

更改数据："username="+ username +"& password="+ 密码，改为

data: {'username':username,'password':password},

Answer 4

试试

location.reload();

而不是

 window.location.href='main.html';