Javascript:window.location 重新加载编写脚本的同一页面

Question

我的页面 (Home.html) 上有一个登录表单，其中包含电子邮件 ID 和密码。它使用 JavaScript 进行验证并重定向到另一个页面 (Login.html)

function redirect() {
  var email = $('#email').val();
  var password = $('#password').val();
  if(email=='user@gmail.com' && password=='user')
     window.location = 'Login.html';
  else
     alert("Wrong credentials");
}


<form onsubmit='redirect()' method='post'>

如果输入了错误的凭据，则会按预期显示警报框，但当输入正确的凭据时，会重新加载 Home.html，而不是转到 Login.html

我尝试将 window.location 更改为 window.location.href 但这没有帮助。

不使用form标签，在button标签中使用onclick调用redirect()函数，可以正常工作。

Answer 1

提交表单将导致加载新页面。这将取消 JS 在其提交事件中执行的任何 location 分配。

由于您没有操作属性，因此加载的新页面是与现有页面具有相同 URL 的页面。

您需要取消提交事件的默认行为(即表单提交)。快速但肮脏的方法是从提交事件处理函数返回 false:

<form onsubmit='redirect(); return false;' method='post'>

<小时/>

现代代码会将事件处理程序与 JavaScript 绑定(bind)，而不是首先使用内部事件处理程序:

<form method='post'>

和

function redirect(event) {
  var email = $('#email').val();
  var password = $('#password').val();
  if(email=='user@gmail.com' && password=='user')
     window.location = 'Login.html';
  else
     alert("Wrong credentials");
  event.preventDefault();
}

document.querySelector("form").addEventListener("submit", redirect);

<小时/>

将编写健壮的代码 unobtrusively这样如果 JavaScript failed (其中 it will )，然后表单将正常提交，服务器端代码将执行该事件。

<小时/>

除此之外，用户重定向到的用户名、密码和不安全 URL 都在页面的源代码中可见，因此您确实需要在服务器上执行此操作，而且无论如何只能在服务器上执行此操作。