Question

我有更改密码的html表格。当用户提交该表单时，我写了另一个<p> </p>元素来告诉用户更改了密码或没有更改密码，并向“登录”页面添加了链接。链接到“登录”和“取消”按钮的功能相同-重定向到登录页面。但是，在使用POST方法后，当我单击“取消/重定向”以登录按钮时，屏幕仅保持加载状态，而从未真正将您重定向到那里。如果我再次单击“提交”按钮，它将再次发送POST请求，因此无论我发送了多少个请求，此按钮都可以正常工作。重定向有什么问题？我似乎无法弄清楚。我在Firefox中进行了检查，似乎可以正常工作。我的代码如下：

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>

此外，如果我先单击Cancel按钮，则在单击“提交”之前，重定向可以正常进行。

如果我在if和else语句中将window.location.href = "/login";放在xhr.onload内，则它也不起作用。所以问题可能出在POST方法上？我真的迷上了这个。.

这是我在提交表单之前单击“取消”的网络：

，这是在之后：

它甚至都没有“登录” ... 我也尝试过

document.getElementById("btn_cancel").onclick = function (event) {
        event.preventDefault();
        fetch('/login/default.html')
            .then(window.location.href = "default.html");
    };

但是似乎它只进入window.location.href里面，再也不会消失

Answer 1

我曾经有过类似的问题，但我仍然不知道出了什么问题，但是我通过向按钮添加<a>标记添加事件来解决了这个问题。

document.getElementById("btn_cancel").innerHTML = "<a href='/login'>Cancel</a>";

Answer 2

您可以尝试

  setTimeout(function(){document.location.href = "/login;"},500);

或

  window.location.assign("/login");

Chrome中的Javascript window.location.href在POST方法后不起作用

2 个答案: