HTML頁面點擊上用onclick功能

提交按鈕刷新後我在這的index.html頁面的表單與阿賈克斯的腳本，在點擊提交按鈕它應該只是顯示「身份認證成功」與否，如果用戶在數據庫中，它可以工作，但是當我點擊提交時，它只顯示消息一秒鐘。我怎樣才能保持消息的顯示？這裏的的index.html：HTML頁面點擊上用onclick功能

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Accueil</title> 
    <style type="text/css" media="screen"> 
     h1 { 
      color:red; 
     } 
    </style> 
     <script language="javascript"> 
    function chargement() 
    { 
     var email = document.getElementById('email').value; 
     var password = document.getElementById('password').value; 

     var x = new XMLHttpRequest(); 
     x.open('GET','verif.php?email='+email+'&password='+password,true); 
     x.onreadystatechange = function() 
     { 
      if ((x.readyState == 4) && (x.status == 200)) 
      { 
       document.getElementById('res').innerHTML= x.responseText; 
      } 
     } 
     x.send(); 
    } 

    </script> 
</head> 
<body> 
    <h1>Bienvenu(e) à Affariyet.tn </h1> 
    <table> 
    <form action="index.html" method="GET"> 
     <tr> 
     <td>Email :</td> 
     <td> <input type="text" id ="email" name="email" value="" placeholder="Votre Email"><br></td> 
     </tr> 
     <tr> 
     <td>Mot De Passe : </td> 
     <td><input type="password" id="password" name="password" value="" placeholder="Votre Mot De Passe"><br></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td> 
      <input type="submit" name="auth" value="S'authentifier" onclick="chargement()"> 
      <input type="reset" name="reset" value="Annuler"> 
     </td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><div id="res"> </div></td> 
     </tr> 
    </form> 

    </table> 


</body> 
</html>

這是具有驗證功能的PHP文件：

<?php 
include 'config.php'; 
class main 
{ 
    public $conn; 
    function __construct() 
    { 
     $c=new config(); 
     $this->conn=$c->connexion(); 
    } 
    function verif($conn,$email,$password) 
    { 
     $req="SELECT `Email`,`Password` FROM utilisateur WHERE `Email`='$email' AND `Password`='$password' "; 
     $res=$conn->query($req); 
     return $res->RowCount(); 
    } 
} 

$m=new main(); 

$email=$_GET['email']; 
$password=$_GET['password']; 
$resultat=$m->verif($m->conn,$email,$password); 
if($resultat==0) 
{ 
    echo '<h4 style="color:red;"> Email ou mot de passe erroné</h4>'; 
} 
else 
{ 
    echo '<h4 style="color:green;">Authentification réussie. Accéder à la <a href=produit.php>Liste des produits</a></h4>'; 
} 


?>

來源

2016-01-29 Hadh

您可以使用此代碼打開SQL注入。目前該頁面重新加載？ – chris85

...另外，你應該逃避輸入，就像現在這樣，它很容易被mysql注入。尋找'mysql_escape'和/或'prepared statement's（preffered）。 – ankhzet

我打開的方式比這哈哈，我只是測試了Ajax，是的頁面重新加載，我只是希望它保持消息不用重新加載？以及如何防止sql注入？ – Hadh

您的問題來自於，當你提交：

你執行chargement()功能由onclick屬性陳述，和它的作品
但因爲你的按鈕有type="submit"其默認行爲是提交形式：那麼action="index.php"執行，所以重新加載頁面，這顯然不不包括你剛剛投入res DIV

要在導致本（即工作無需重新加載頁面），可以使用兩種方法：

一個是防止默認動作，無論是作爲已經@anhkzet（提出，但在你的情況下，它不能正常工作「爲是「;看看它的答案的編輯），或通過添加event作爲參數傳遞給你的chargement()功能，則包括event.preventDefault;之前結束
更簡單地說，你可以改變你的<input type="submit"...>到<button type=button"...>：這樣的形式是不是在所有提交的。

編輯迴應在下面的評論中加入OP補充問題。

爲了使用POST而不是GET您只能在您的XMLHttpRequest.open()函數中替換所需的方法。

我想你會問，因爲你不確定如何在這種情況下通過POST數據。
實際上，在方法中沒有可能包含此類數據的參數，但無關緊要：與<form>標記一樣，您可以立即使用POST方法和將查詢參數保留在url中。

來源

2016-01-29 01:50:20 cFreed

非常感謝你！編輯：你知道如何使用POST方法而不是GET嗎？ – Hadh

@Hadh否定你的最後一個問題，看看我的編輯。 – cFreed

謝謝，我使用它並使其工作。 – Hadh

與submit類型的輸入是爲了在形式上將數據發送到服務器。要防止提交按鈕的默認行爲，請在chargement()處理程序的末尾添加return false;。

好吧，apparantly，我忘了「回合return語句中的屬性...

或者：

<input type="submit" onclick="return chargement()" />

...添加到return false方法chargement的末尾。

...或只是

<input type="submit" onclick="chargement(); return false;" />

雙方應該工作。

來源

2016-01-29 01:31:17 ankhzet

它沒有改變任何東西，你能解釋一點嗎？ – Hadh

HTML頁面點擊上用onclick功能

回答

相關問題