我如何使这个AJAX/PHP的工作？

所以我是新来的AJAX（不像PHP新），我试图创建一个登录使用AJAX来查询PHP文件。所以，这是我正在尝试使用的代码。我如何使这个AJAX/PHP的工作？

我有三个文件。第一个是login_form.php。它包含登录表单...

<html> 
    <head> 
     <title>Log In</title> 
     <script language="javascript" src="loginsender.js" /> 
    </head> 
    <body> 
     <form method="post" name="loginfrm" onsubmit="formValidator()"> 
      <p id="hint"></p> 
      <label for="username">Username:</label><input type="text" name="username" id="username" /> 
      <label for="password">Password:</label><input type="password" name="password" id="password" /> 
      <input type="submit" name="submit" value="Log In" /> 
     </form> 
    </body> 
</html>

下一个loginsender.js。这是我使用发送到PHP脚本的JavaScript/AJAX文件...

function formValidator() 
{ 
    if (document.loginfrm.username.value.length < 3 || loginfrm.password.value.length < 3) 
    { 
     msg = "Please enter a valid username/password." 
     document.getElementById("hint").innerHTML=msg; 
    } 
    else 
    { 
     if (window.XMLHttpRequest) 
     { 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
      { 
       document.getElementById("hint").innerHTML = xmlhttp.responseText; 
      } 
     } 
    } 

    var params = "username=" + document.loginfrm.username.value + "&password=" + document.loginfrm.password.value; 
    xmlhttp.open("post", "login.php", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.setRequestHeader("Content-length", params.length); 
    xmlhttp.setRequestHeader("Connection", "close"); 
    xmlhttp.send(params); 
}

最后一个是login.php中，这是我使用来处理实际记录的.. 。

<?php 
session_start(); 

require_once("includes/mysql.inc.php"); 
require_once("includes/functions.inc.php"); 

$username = sanitize($_POST['username'], true); 
$password = sanitize($_POST['password'], true); 

$query = "SELECT * FROM users WHERE username = '$username'"; 
$result = mysql_query($query); 
if (mysql_num_rows($result) != 1) // no such user exists 
{ 
    echo 'Sorry, no such user exists'; 
    logout(); 
    die(); 
} 
$userData = mysql_fetch_assoc($result); 
$hash = hash('sha256', $userData['salt'] . hash('sha256', $password)); 

if ($hash == $userData['password'] && $username == $userData['username']) // successful log in 
{ 
    validateUser($userData['username']); // set session data 
    echo '<meta http-equiv="refresh" content="2; url=index.php" />'; 
} 
else 
{ 
    echo 'Sorry, but you entered an incorrect username/password.'; 
    logout(); 
    die(); 
} 

?>

总而言之，我们的目标是让用户在输入login_form.php自己的用户名和密码组合，并提交，引发loginsender.js（和formValidator（）方法）。然后这将查询PHP登录脚本，该脚本将测试有效的用户/通行组合，然后在会话中设置它（或者，如果登录失败）。问题是，无论我输入什么样的组合，都不会发生任何事情，点击提交后页面会刷新，但就是这样。

**更新1：我已经编辑了我的login_form页面，我只是将formValidator函数放入脚本中，以便于我查看而不是在文档之间翻转。

我也实施了一些建议。

这就是：

<html> 
    <head> 
     <title>Log In</title> 
     <script type="text/javascript" language="javascript"> 
     function formValidator() 
     { 
      if (document.loginfrm.username.value.length < 3 || loginfrm.password.value.length < 3) 
      { 
       msg = "Please enter a valid username/password." 
       document.getElementById("hint").innerHTML=msg; 
      } 
      else 
      { 
       if (window.XMLHttpRequest) 
       { 
        xmlhttp = new XMLHttpRequest(); 
       } 
       else 
       { 
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 

       xmlhttp.onreadystatechange = function() 
       { 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
        { 
         document.getElementById("hint").innerHTML = xmlhttp.responseText; 
        } 
       } 
      } 

      var params = "username=" + document.loginfrm.username.value + "&password=" + document.loginfrm.password.value; 
      xmlhttp.open("post", "login.php", true); 
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      xmlhttp.setRequestHeader("Content-length", params.length); 
      xmlhttp.setRequestHeader("Connection", "close"); 
      xmlhttp.send(params); 
     } 
     </script> 
    </head> 
    <body> 
     <p id="hint"></p> 
     <form method="post" name="loginfrm" onsubmit="formValidator(); return false;"> 
      <label for="username">Username:</label><input type="text" name="username" id="username" /> 
      <label for="password">Password:</label><input type="password" name="password" id="password" /> 
      <input type="submit" name="submit" value="Log In" /> 
     </form> 
    </body> 
</html>

来源

2011-09-29 Alper

您应修改您的登录。 PHP，你不能通过ajax请求元刷新。在javascript代码块中获得ajax响应后，您必须进行元刷新/页面重定向过程。 – mahadeb

你是什么意思？ – Alper

它看起来并不像你防止发生默认的“提交”行动，这因为你还没有为表单定义一个action是刚刚POST回到当前页面。

更改表单的HTML行：

<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">

的return false;告诉它不要做任何它打算为行动做。

来源

2011-09-29 07:17:03 Dave

当我更改我的代码时，它只是重定向到login_form页面，而不显示更新的错误消息。 – Alper

也许你错过了任何“在上面的行 – mahadeb

不，我会发布我的更新代码作为我的问题的编辑，我只会称它为更新1. – Alper

如果您不希望Form-submit-action刷新页面，请从您的onsubmit脚本返回false。否则，浏览器将按照您在<form>中告诉他的内容完成：HTTP POST。

来源

2011-09-29 07:17:55 Hank

我认为OnSubmit（）函数被执行，并且表单也真的被提交了！所以你得到一个空白页面，这是PHP脚本的输出。

不要使它成为html格式，它应该可以正常工作。

来源

2011-09-29 07:18:12 balki

你需要编写此去防止刷新..

<form method="post" name="loginfrm" onsubmit="formValidator(); return false;">

除此之外，你的代码是很好..

来源

2011-09-29 07:22:01

试试这个

<input type="submit" name="submit" value="Log In" onclick="formValidator(); return false;"/>

来源

2011-10-29 07:51:23 Lee

我如何使这个AJAX/PHP的工作？

回答

相关问题