Question

我在此 index.html 页面中有一个带有Ajax脚本的表单，点击提交按钮时，它应该只显示“验证成功”，如果用户在数据库中，它可以工作，但是当我点击提交时，它只显示消息一秒钟。如何显示消息？这是 index.html ：

<!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>';
}


 ?>

Answer 1

当您提交时，您的问题就出现了：

执行chargement()属性所述的onclick功能，并且可以正常运行
但由于你的按钮有type="submit"，它的默认行为是提交表单：然后执行action="index.php"，所以重新加载页面，这显然不包括你刚才放的内容进入res div

为避免这种情况（即不重新加载页面而工作），您可以使用两种方法：

一个是防止默认操作，正如@anhkzet已经提出的那样（但在你的情况下，它不能“按原样”工作;查看答案的编辑内容，或者将event作为参数添加到chargement()函数中，然后在event.preventDefault;结束之前添加<input type="submit"...>
更简单地说，您可以将<button type=button"...>更改为POST：这样就不会提交表单了。

编辑回应OP在其评论中添加的补充问题。

要使用GET而不是XMLHttpRequest.open()，您只能在POST函数中替换所需的方法。

我猜你问这个问题，因为在这种情况下，你确定如何传递<form>数据。
实际上，方法中没有包含此类数据的参数，但这并不重要：与POST标记一样，您可以立即使用<Elements> <imported> <product name="Software #">0 </product> <product name="Hardware">1000 Pieces </product> <product name="Parts">300 </product> <product name="Wholes sales">1000</product> <product name="Cars">Audi (10) Porche (22) Skoda (48)</product> <product name="Final Report">0</product> </imported> </Elements>方法和< / em>保持查询参数附加到网址。

Answer 2

类型为submit的输入用于将表单中的数据发送到服务器。要防止提交按钮的默认行为，请在return false;处理程序的末尾添加chargement()。

好的，显然，我忘了在属性内部发表return声明......

或者：

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

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

......或者只是

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

两者都应该有用。

单击带有onclick功能的提交按钮后，HTML页面会刷新

2 个答案: