Chrome中的Javascript window.location.href在POST方法后不起作用
[英]Javascript window.location.href in chrome doesn't work after POST method
问题描述
I have change password html form. 
我已经更改了html密码表单。 When user submits that form, I write another <p> </p> element to tell user changed his password or did not and add link to Login page. 当用户提交该表单时，我写了另一个<p> </p>元素来告诉用户更改了密码或没有更改密码，然后将链接添加到“登录”页面。 Both link to Login and Cancel button does the same - redirect to login page. 链接到“登录”和“取消”按钮的功能相同-重定向到登录页面。 However, after POST method when I click Cancel/redirect to login buttons the screen just keeps loading and never really redirects you there. 但是，在使用POST方法后，当我单击“取消/重定向”以登录按钮时，屏幕仅保持加载状态，而从未真正将您重定向到那里。 If I click submit button once again, it sends POST request again so this button works fine no matter how many requests I send. 如果我再次单击“提交”按钮，它将再次发送POST请求，因此无论我发送了多少个请求，此按钮都可以正常工作。 What's wrong with redirection? 重定向有什么问题？ I can't seem to figure that out. 我似乎无法弄清楚。 I checked that in Firefox and it seems to work there fine. 我在Firefox中进行了检查，似乎可以正常工作。 My code is below: 我的代码如下：
document.getElementById("btn_cancel").onclick = function(event) { window.location.href = "/login"; }; var token = window.location.href.substring(window.location.href.lastIndexOf("/") + 1); function validate() { var responseText = document.getElementById('error_id'); var password = document.forms["reset-pasword"]["new_password"].value; var confirmPassword = document.forms["reset-pasword"]["repeat_password"].value; if (password !== confirmPassword) { error = "Passwords do not match"; responseText.innerHTML = error; responseText.className = "error_text"; return false; } return true; } document.getElementById("btn_change").onclick = function(event) { event.preventDefault(); var responseText = document.getElementById('error_id'); if (validate() != true) return; var password = document.getElementById("new_password").value; var request = { token: token, password: password }; var xhr = new XMLHttpRequest(); xhr.open('POST', '/update', true); xhr.setRequestHeader('Content-type', 'application/json'); xhr.onload = (res) => { response = res['target']['response']; if (response) { response = JSON.parse(response); responseText.innerHTML = response.message; responseText.className = "error_text"; } else { responseText.innerHTML = "Password changed succesfully. <a href=\\"/login\\">Login</a>"; responseText.className = "success_text"; } }; xhr.send(JSON.stringify(request)); };
<body onload="document.getElementById('reset-pasword').focus();"> <div class="box" id="change_password_panel"> <form name="reset-pasword" id="reset-pasword"> <label for="password">New password</label> <input type="password" placeholder="New Password" id="new_password" name="new_password" required /> <label for="password">Repeat new password</label> <input type="password" placeholder="Repeat Password" id="repeat_password" name="repeat_password" required /> <div style="width: 100%; display: inline-block;margin-top: 10px;"> <div style="float: left;"><button id="btn_change" class="button">Change password</button> </div> <div style="float: right;"><button id="btn_cancel" type="button" class="button">Cancel</button></div> </div> <p id="error_id"></p> </form> </div> </body>
Also, if I click Cancel button first, before clicking Submit, redirection works fine. 另外，如果我先单击“ Cancel按钮，则在单击“提交”之前，重定向工作正常。
If I put window.location.href = "/login"; 如果我把window.location.href = "/login"; inside xhr.onload in if and else statements it doesn't work either. 在xhr.onload中的if和else语句中也不起作用。 So the problem is could be with POST method? 所以问题可能出在POST方法上？ I'm really lost with this one.. 我真的迷失了这个..
This is network when I click 'Cancel' before submitting form: 当我在提交表单之前单击“取消”时，这是网络：
and this is after: 这是在之后：
It doesn't even have 'login' in it... I also tried 它甚至都没有“登录” ...我也尝试过
document.getElementById("btn_cancel").onclick = function (event) { event.preventDefault(); fetch('/login/default.html') .then(window.location.href = "default.html"); };
but it seems it just goes inside window.location.href and never goes out there 但似乎它只在window.location.href而从不外出
2 个解决方案
解决方案1
0 2019-08-26 07:20:34
我曾经有过类似的问题，但仍然不知道出了什么问题，但是我解决了这个问题，在按钮上添加了<a>标记添加事件。
document.getElementById("btn_cancel").innerHTML = "<a href='/login'>Cancel</a>";
解决方案2
0 2019-08-26 07:33:56
Can you try 你能试一下吗
setTimeout(function(){document.location.href = "/login;"},500);
or 要么
window.location.assign("/login");
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.