Javascript JS重定向未按预期工作_Javascript_Html_Redirect

Javascript JS重定向未按预期工作

javascript html redirect

Javascript JS重定向未按预期工作,javascript,html,redirect,Javascript,Html,Redirect,我有一个非常基本的代码，其中我有两个HTML页面，index.HTML是一个基本的身份验证页面，crap.HTML是我做一些废话的页面。现在，我在index.html上有一个表单，它附带了onsubmit（）处理程序，以便检查用户名和密码。如果正确，它将显示一条消息并继续将用户重定向到crap.html 现在的问题是，对于错误的凭据，此重定向似乎可以正常工作，但当提供正确的凭据时，它会自动重新加载index.html页面，即使auth.js中没有重定向代码代码如下： auth.js fun

我有一个非常基本的代码，其中我有两个HTML页面，

index.HTML

是一个基本的身份验证页面，

crap.HTML

是我做一些废话的页面。
现在，我在

index.html

上有一个表单，它附带了

onsubmit（）

处理程序，以便检查用户名和密码。如果正确，它将显示一条消息并继续将用户重定向到

crap.html

现在的问题是，对于错误的凭据，此重定向似乎可以正常工作，但当提供正确的凭据时，它会自动重新加载

index.html

页面，即使

auth.js

中没有重定向代码

代码如下：

auth.js

function passCheck(){
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
var error = document.getElementById("error");
var set_user = "admin";
var set_pass = "admin";

if(user==set_user && pass==set_pass){
    error.style.color="green";
    error.innerHTML = "AUTHENTICATED CORRECTLY. REDIRECTING NOW.";
    setTimeout(function(){
        window.location.href="../crap.html";
    }, 3000);
}else{
    error.style.color="red";
    error.innerHTML = "WRONG CREDENTIALS. REDIRECTING NOW.";
    setTimeout(function(){
        window.location.href="../index.html";
    }, 1000);
  }
}

<html>
<head>
<title>Authentication</title>
    <script src="js/jquery.js"></script>
    <script src="js/auth.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <form onsubmit="passCheck()">
        <table border=0>
            <tr>
                <td>Username</td>
                <td><input type="text" id="username" placeholder="Username" required autofocus></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" id="password" required></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="AUTHENTICATE">
                </td>
            </tr>
        </table>
    </form>
      <center>
            <div id="error"></div>
      </center>
  </body>
</html>

index.html

function passCheck(){
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
var error = document.getElementById("error");
var set_user = "admin";
var set_pass = "admin";

if(user==set_user && pass==set_pass){
    error.style.color="green";
    error.innerHTML = "AUTHENTICATED CORRECTLY. REDIRECTING NOW.";
    setTimeout(function(){
        window.location.href="../crap.html";
    }, 3000);
}else{
    error.style.color="red";
    error.innerHTML = "WRONG CREDENTIALS. REDIRECTING NOW.";
    setTimeout(function(){
        window.location.href="../index.html";
    }, 1000);
  }
}

<html>
<head>
<title>Authentication</title>
    <script src="js/jquery.js"></script>
    <script src="js/auth.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <form onsubmit="passCheck()">
        <table border=0>
            <tr>
                <td>Username</td>
                <td><input type="text" id="username" placeholder="Username" required autofocus></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" id="password" required></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="AUTHENTICATE">
                </td>
            </tr>
        </table>
    </form>
      <center>
            <div id="error"></div>
      </center>
  </body>
</html>


认证
用户名
密码

重新加载页面的原因是表单已提交到同一页面。您的表单没有action属性。为了防止表单实际提交，您需要

返回false
或者，在提交处理程序中设置表单操作。您可以轻松地使用。
您是否尝试过将完整URL替换为…/crap.html？可能会缩小问题的范围。@lolkidoki即使我省略了重定向部分，它仍然会自动重新加载页面。请注意，这并没有增加任何实际的安全性。可能的重复工作就像一个符咒。在这两种情况下，我都返回了false
，这使情况完全不同。