如何防止jQuery的提交按钮刷新HTML页面？

时间：2018-08-16 13:37:14

标签： javascript php jquery html

我有一个登录页面，用户在其中输入用户名和密码，当他提交此表单时，数据将发送到php文件中以验证密码。 用户首次输入数据（我输入了错误的详细信息）时，页面显示“密码无效...请重试”。

用户第二次输入数据（再次输入错误的详细信息）时，页面将重新加载。我不明白为什么会这样。 为了更好地理解，我在显示该问题的视频中添加了Google驱动器链接。

链接：Link to the video

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");
                }
            }
        });
    });
});

我确定php代码没有问题，所以我不在这里粘贴只是为了使问题更清楚。 如果您需要项目的全部代码，可以在这里获取：Github link to the project

5 个答案:

答案 0 :(得分：1)

尝试使用此功能。希望对您有帮助

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

请让我知道它是否无效。

答案 1 :(得分：1)

    else {
        document.getElementById('admin-signin-card').innerHTML += '<div class="alert …>';
在元素的.innerHTML中

添加会替换元素的全部内容；甚至连已经存在的东西都将被删除，然后重新创建。

因此，您的表单本身将替换为新表单，因此，您将完全失去附加到该表单的Submit事件处理程序。

您尝试阻止默认事件操作的尝试失败了，因为您的处理函数根本不再被调用，并且现在仅执行正常的表单提交，因此当然会重新加载页面。

您需要在替换父容器的innerHTML之后再次添加事件处理程序，或使用事件委托作为开始。

答案 2 :(得分：0)

在return false函数末尾尝试$("#admin-signin").submit而不是preventDefault()

答案 3 :(得分：0)

发生这种情况的原因是您如何处理错误。通过使用document.getElementById('admin-signin-card').innerHTML += ...，您可以有效地重新加载表单，这意味着您将丢失事件侦听器。您可以调整错误的显示方式，也可以调整事件侦听器。

我建议更改显示错误的方式。

在下面的示例中，我已删除了请求，但思路相同：

$(document).ready(function () {
		$("#admin-signin").submit(function (e) {
			e.preventDefault();
			let admin_username = $("#admin_username").val();
			let admin_password = $("#admin_password").val();
			let response = "no";
			if (response === "OK") {
				window.open("admin.html", "_self");
			} else {
				document.getElementById('admin-signin-card-error').innerHTML ='<div class="alert alert-danger"><h5>Error occured...Please try again</h5></div>';
				console.log("error shown");
			}
		});
	});
<!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>
  <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 id="admin-signin-card-error"></div>
        </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>

</html>

答案 4 :(得分：0)

就像提到的@CBroe一样，问题是由innerHTML引起的。

我将innerHTML的内容移至该表单，并且在出现错误时显示.show（）

时不显示任何内容。

出于测试目的，我更改了ajax网址和数据类型。

$(document).ready(function () {

    $("#admin-signin").on('submit', function (event) {

        event.preventDefault();

        let admin_username = $("#admin_username").val();
        let admin_password = $("#admin_password").val();

        $.ajax({
            url: 'https://jsonp.afeld.me/?url=https://jsonview.com/example.json',
            type: "POST",
            dataType: "jsonp",
            data: {
                admin_username: admin_username,
                admin_password: admin_password
            },
            success: function (response) {
            
                if (response === "OK") {

                    window.open("admin.html", "_self");

                } else {

                    $('.alert.alert-danger').show();
                    
                    console.log("error shown");
                }
            }
        });
    });
});
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<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">
            <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>
                <div class="alert alert-danger" style="display: none;"><h5>Error occured...Please try again</h5></div>
            </form>
        </div>
    </div>
</div>
</div>

<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>
</body>
</html>

相关问题
最新问题