我如何使這個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的工作？

回答

相關問題