如何防止jquery提交按钮刷新HTML页面?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (724)

我有一个用户输入用户名和密码的登录页面,当他提交此表单时,数据被发送到php文件以验证密码。当用户第一次输入数据时(我输入了错误的详细信息),页面显示“密码无效...请再试一次”。

第二次用户输入数据时(我再次输入错误的详细信息)页面才会重新加载。我无法理解为什么会这样。为了更好地理解,我在显示问题的视频中添加了一个google驱动器链接。

HTML代码:

<!DOCTYPE html>
<html lang="en" xmlns:justify-content="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<title>RVPS Elections</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark padding ">
<div class="container-fluid">
    <a class="navbar-brand" href="index.html">
        <img src="assets/rv.png">
        RV PUBLIC SCHOOL
    </a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="admin.html">Admin Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">Contact Us</a>
        </li>
    </ul>
</div>
</nav>
<div class="container">
<p align="center" class="lead">Get administrator access by entering correct details</p>
</div>
<div class="container-fluid padding mt-1 " style="align-items: center;  justify-content:center; display:flex ;" >
<div class="row padding">
    <div class="card border-dark" >
        <div class="card-header" align="center">
            <img src="assets/rv.png">
            <h5>Admin Sign In</h5>
        </div>
        <div class="card-body" id="admin-signin-card">
            <form id="admin-signin">
                <div class="form-group">
                    <label>Username</label>
                    <input id="admin_username" type="text" class="form-control input-lg" placeholder="Enter your username" required>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input id="admin_password" type="password" class="form-control input-lg" placeholder="Enter your Password" required>
                </div>
                <div class="form-group">
                    <a href="#" class="text-primary">Forgot Password?</a>
                </div>
                <div class="form-group" >
                    <input id="submit_button" type="submit" name="Sign In" value="Sign In" class="btn btn-success input-lg">
                </div>
            </form>
        </div>
    </div>
</div>
</div>
<footer>
<div class="container-fluid padding">
    <h1  align="center">About Us</h1>
    <p align="center">I am Goutam B Seervi. A student of RVPS for the year 2015-18</p>
    <h2 align="center">Contact me</h2>
    <p align="center">Phone nnumber : 7019271367</p>
    <p align="center">Email id : goutambseervi@gmail.com</p>
</div>
</footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="js/admin_login_script.js"></script>
</html>

javascript部分:

$(document).ready(function () {
    $("#admin-signin").submit(function (e) {
        e.preventDefault();
        let admin_username = $("#admin_username").val();
        let admin_password = $("#admin_password").val();
        $.ajax({
            url: 'php_admin_login.php',
            data: {
                admin_username: admin_username,
                admin_password: admin_password
            },
            type: "POST",
            dataType: "json",
            success: function (response) {
                if (response === "OK") {
                    window.open("admin.html", "_self");
                }
                else {
                    document.getElementById('admin-signin-card').innerHTML += '<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
                    console.log("error shown");
                }
            }
        });
    });
});
提问于
用户回答回答于
    else {
        document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';

添加.innerHTML替换元素的全部内容; 甚至已经存在的东西将首先被删除,然后重新创建。

因此,你的表单本身将替换为新表单,因此你完全丢失了你附加到它的提交事件处理程序。

你尝试阻止默认事件操作失败,因为你根本不再调用处理函数,现在只执行普通表单提交,当然会重新加载页面。

你需要在替换父容器的innerHTML后再次添加事件处理程序 - 或者使用事件委托开始。

用户回答回答于

试着用这个。

 $("form").submit(function(e){
    e.preventDefault();
 });

扫码关注云+社区

领取腾讯云代金券