问如何防止jquery提交按钮刷新HTML页面？
EN

Stack Overflow用户

提问于 2018-08-16 21:37:14

回答 4查看 138关注 0票数 2

我有一个登录页，在那里用户输入他的用户名和密码，当他提交这个表单时，数据被发送到php文件，用于验证密码。当用户第一次输入数据(我输入了错误的详细信息)时，页面会显示"Invalid password...please try the“。

第二次，当用户输入数据时(我再次输入了错误的详细信息)，页面就会重新加载。我不能理解为什么会发生这种情况。为了更好地理解这个问题，我添加了一个google drive链接到一个显示该问题的视频。

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

javascript

php

jquery

html

回答 4

Stack Overflow用户

发布于 2018-08-16 21:47:15

试着用这个。希望能有所帮助

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

如果它不能工作，请告诉我。

票数 1

Stack Overflow用户

发布于 2018-08-16 21:42:04

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

票数 0

Stack Overflow用户

发布于 2018-08-16 21:54:18

这是由于您处理错误的方式造成的。通过使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51878426

复制

相似问题

问如何防止jquery提交按钮刷新HTML页面？
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止jquery提交按钮刷新HTML页面？EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何防止jquery提交按钮刷新HTML页面？
EN