AJAX 问题：按钮不再响应

Question

昨晚我遇到了注册问题，当使用 ajax 时 php 将空数据保存到我的数据库中，但在堆栈溢出的帮助下问题得到了解决。我在 url 中发送数据，而不是使用 $_GET，我使用了 $_POST，问题解决了，所以今天早上我想让登录页面做同样的事情，但是这次当我向它添加 ajax 时，登录按钮什么也不做，它只是点击什么都不做

我试图做的是，当用户使用正确的信息登录时，它会转到主页 index.php，但是当用户尝试使用错误的信息登录时，它会回显无效。所以我试图在 index.php 中回显它，而不是将用户带到新页面。

以下是我正在处理的代码。这个被保存为 index.php，用户在那里放置详细信息。

<?php
if (!isset($_SESSION['uid'])) {
    echo "<form action='login_parse.php' method='post' style='display: inline-block'>
    Username: <input type='text' name='username' id='username' />
    Password: <input type='password' name='password' id='password' />
    <input type = 'button' value='login' id='submit' onclick='hello2()'/>";
    echo "</form>";
    echo "<form action='signup.php' method='post' style='display: inline-block'>";
    echo "&nbsp";
    echo "<input type='submit' name='submit' value='Signup'>";
    echo "</form>";
    echo "<div id='ack1'></div>";

} else {
    echo "<form style='display: inline-block'>";
    echo "<p>You are logged in as ".$_SESSION['username']."";
    echo "</form>";
    echo "<form action='logout_parse.php' method='post' style='display: inline-block'>";
    echo "&nbsp";
    echo "<input type='submit' value='logout'>";
    echo "</form>";
}
?>

这个保存为ajax.js

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}

  var HTTP = loadXMLDoc();

function hello2(){

  var username = encodeURIComponent(document.getElementById('username').value);
  var password = encodeURIComponent(document.getElementById('password').value);
  var url = "login_parse.php?username="+username+"&password="+password;
HTTP.onreadystatechange=function()
  {
  if (HTTP.readyState==4 && HTTP.status==200)
    {
    document.getElementById("ack1").innerHTML=HTTP.responseText;
    }
  }
HTTP.open("POST", url ,true);
HTTP.send();
}

最后这个保存为login_parse.php

<?php

session_start();
include_once("connect.php");

if (isset($_POST['username'])) {
    $username = mysql_real_escape_string( $_GET["username"]);
    $password = mysql_real_escape_string( md5 ($_GET["password"]));
    $sql = "SELECT * FROM users WHERE username='".$username."' AND password='".$password."' LIMIT 1";
    $res = mysql_query($sql) or die(mysql_error());

    if(mysql_num_rows($res) == 1) {
        $row = mysql_fetch_assoc($res);
        $_SESSION['uid'] = $row['id'];
        $_SESSION['username'] = $row['username'];
        header("Location: index.php");
        exit();
    } else{
        echo "INVALID login information.";
        exit();
    }
}

?>

我是不是做错了什么，我必须使用 ajax 来回显 index.php 中的无效

Answer 1

这里是 ajax 代码不显示无效登录消息的修复。

首先，我删除了 hello2 函数的函数调用，并将其放置在页面底部脚本标记内的 javascript 事件中。这使我更容易进行测试。您必须将 id 提交按钮添加到您的按钮 html。

您的索引 php 文件中的先前回显现在将如下所示。

    echo "<form action='login_parse.php' method='post' style='display: inline-block'>
Username: <input type='text' name='username' id='username' />
Password: <input type='password' name='password' id='password' />
<input id='submit-button' type = 'button' value='login' id='submit' />";

这是在 index.php 文件的结束 body 标记之前的 javascript：

    <script src="ajax.js"></script>
<script>


//return XMLHTTP request and store it
var HTTP = loadXMLDoc();

//on click event for #submit-button
var submitEvent = document.getElementById("submit-button").onclick = function(){

    hello2(HTTP);



};

</script>

这是我发现的主要问题。我通过将变量 xmlhttp 放在 ajax.js 代码的顶部，使变量具有全局范围。

我最初通过更改以下代码行发现了这个问题：

 document.getElementById("ack1").innerHTML= HTTP.responseText;

到：

document.getElementById("ack1").innerHTML= "it worked";

通过这样做，我发现此时您的函数调用正在运行，但您的 HTTP.onreadystatechange=function(){} 无法访问 responseText。

下面是新的 ajax.js 文件代码：

 //moved variable outside of functions to give it the global scope
var xmlhttp;

function loadXMLDoc()
{



if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlhttp;
}



function hello2(HTTP){

  var username = encodeURIComponent(document.getElementById('username').value);
  var password = encodeURIComponent(document.getElementById('password').value);

  var url = "login_parse.php?username="+username+"&password="+password;


HTTP.onreadystatechange=function()
  {

  if (HTTP.readyState===4 && HTTP.status === 200){

    document.getElementById("ack1").innerHTML= HTTP.responseText;



    }
  };//<--was missing a semicolon ;

  HTTP.open("POST", url ,true);


HTTP.send();


}

修复 PHP 代码，这样您无需刷新 index.php 即可显示您“以 ... 身份登录”消息。

将此 php 代码放在 index.php 文件中的任何其他 php 代码之前，以便您可以访问会话变量。

             //start the session so that you can echo session variables on this page
             session_start();