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

Question

I have a form in this index.html page with an Ajax script, on clicking the submit button it should just display "Authentification succeeded" or not, if the user is in the database, it works but when I hit submit it displays the message for only one second. 我在这个带有Ajax脚本的index.html页面中有一个表单，单击“ 提交”按钮时，它应该只显示或“不成功”，如果用户在数据库中，它可以工作，但是当我单击“提交”时，它会显示消息仅一秒钟。 How can I keep the message displayed? 如何保持消息显示？ Here's the 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>

And this is the PHP file that has the verification function : 这是具有验证功能的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

Your issue comes from that, when you submit: 您的问题来自于此，当您提交时：

you execute the chargement() function as stated by the onclick attribute, and it works 您执行onclick属性所述的chargement()函数，即可正常工作
but since your button has type="submit" its default behaviour is to submit the form: then the action="index.php" is executed, so reloading the page, which obviously doesn't not include what you'd just put into the res div 但是由于您的按钮的type="submit"其默认行为是提交表单：然后执行action="index.php" ，因此重新加载页面，这显然不包括您刚刚输入的内容res

To avoid this (ie work without reloading the page) you can use two ways: 为避免这种情况（即无需重新加载页面即可工作），可以使用两种方法：

one is to prevent default action, either as already proposed by @anhkzet ( but in your case it can't work "as is"; look at it's answer's edit), or by adding event as argument to your chargement() function, then including event.preventDefault; 一种是防止默认操作，要么按照@anhkzet的建议（但在您的情况下它不能“按原样”运行；请看其答案的编辑），要么通过将event作为参数添加到chargement()函数中，然后包括event.preventDefault; before it ends 在结束之前
more simply you can change your <input type="submit"...> into <button type=button"...> : this way the form is not submitted at all. 更简单地说，您可以将您的<input type="submit"...>更改为<button type=button"...> ：这样，就完全不提交表单。

EDIT in response to the supplemental question added by the OP in its comment below. 编辑以回应OP在以下评论中添加的补充问题。

In order to use POST rather than GET you can merely substitute the desired method in your XMLHttpRequest.open() function. 为了使用POST而不是GET您只能在XMLHttpRequest.open()函数中替换所需的方法。

I guess that you ask it because you're incertain about how to pass POST data in this case. 我想您之所以这么问，是因为您不确定在这种情况下如何传递POST数据。
In fact there is no place in the method for an argument that would contain such data, but it doesn't matter: like with the <form> tag you can at once use POST method and keep query parameters attached to the url. 实际上，方法中没有包含此类数据的参数的位置，但这没关系：像<form>标记一样，您可以立即使用POST方法并将查询参数附加到url。

Answer 2

Inputs with type submit are meant to send data in form to server. 同类型的输入submit是为了在形式上将数据发送到服务器。 To prevent default behaviour of submit button add return false; 为了防止提交按钮的默认行为，添加return false; at the end of chargement() handler. 在chargement()处理函数的末尾。

Ok, apparantly, I forgot 'bout return statement inside attribute... 好的，显然，我忘记了属性内的回合return语句...

Either: 要么：

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

... and add return false to the end of chargement method. ...并将return false添加到chargement方法的结尾。

...or just ...要不就

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

Both should work. 两者都应该起作用。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2016-01-29 01:50:20

解决方案2
2 2016-01-29 01:31:17

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2016-01-29 01:50:20

解决方案2 2 2016-01-29 01:31:17

解决方案1
3 已采纳 2016-01-29 01:50:20

解决方案2
2 2016-01-29 01:31:17