使用onclick功能单击“提交”按钮后，HTML页面正在刷新

Question

我在这个带有Ajax脚本的index.html页面中有一个表单，单击“ 提交”按钮时，它应该只显示或“不成功”，如果用户在数据库中，它可以工作，但是当我单击“提交”时，它会显示消息仅一秒钟。 如何保持消息显示？ 这是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

您的问题来自于此，当您提交时：

1. 您执行onclick属性所述的chargement()函数，即可正常工作
2. 但是由于您的按钮的type="submit"其默认行为是提交表单：然后执行action="index.php" ，因此重新加载页面，这显然不包括您刚刚输入的内容res

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

• 一种是防止默认操作，要么按照@anhkzet的建议（但在您的情况下它不能“按原样”运行；请看其答案的编辑），要么通过将event作为参数添加到chargement()函数中，然后包括event.preventDefault; 在结束之前

• 更简单地说，您可以将您的<input type="submit"...>更改为<button type=button"...> ：这样，就完全不提交表单。

---

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

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

我想您之所以这么问，是因为您不确定在这种情况下如何传递POST数据。
实际上，方法中没有包含此类数据的参数的位置，但这没关系：像<form>标记一样，您可以立即使用POST方法并将查询参数附加到url。

Answer 2

同类型的输入submit是为了在形式上将数据发送到服务器。 为了防止提交按钮的默认行为，添加return false; 在chargement()处理函数的末尾。

---

好的，显然，我忘记了属性内的回合return语句...

要么：

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

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

...要不就

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

两者都应该起作用。