javascript - AJAX 问题 : button doesn't responsed anymore

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。

index php 文件中之前的 echo 现在看起来像这样。

    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 代码之前，以便您可以访问 session 变量。

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