AJAX问题:按钮不再响应

时间:2014-12-10 11:56:41

标签: javascript php jquery mysql ajax

昨晚我遇到了注册问题,当使用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中的无效

1 个答案:

答案 0 :(得分:1)

以下是未显示无效登录消息的ajax代码的修复程序。

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

你的索引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文件的结束正文标记之前的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以显示您已登录为...&#34;消息。

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

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