Question

我有用于更改密码的页面，并且在向后端发送POST请求之后。我添加了其他元素<a href=\"/login\">Login</a>，以便用户可以返回登录页面并登录。但是，此按钮和Cancel按钮都不会执行任何操作。单击它后，页面开始加载，但始终保持不变-不会重定向到登录页面。如果我复制该链接并在新页面中打开并单击Cancel，则它可以正常工作。这是我的代码：

    document.getElementById("btn_cancel").onclick = function () {
        window.location.replace("/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) {
        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', '/api/v1/Auth/UpdatePassword', 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));
        event.preventDefault();
    };

<div 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" type="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>

这里可能出什么问题了？

cancel和Change password这两个按钮在我看来都是相同的，但是我可以多次单击Change password，而当我单击cancel时，页面只会继续加载。

我也尝试过：

    document.getElementById("btn_cancel").onclick = function (event) {
        event.preventDefault();
        window.location = "http://localhost:4200/";
    };

什么都不起作用...

Answer 1

单击cancel按钮可以正常工作。至于Change password按钮，请检查xhr.onload功能。成功后，您需要在html元素中呈现"Password changed succesfully. <a href=\"/login\">Login</a>"；像document.getElementById("resultDiv").innerHTML="Password changed succesfully. <a href=\"/login\">Login</a>"之类的东西，目前您只是在更新responseText.innerHTML的值，但是responseText并未在任何地方定义。

Answer 2

您要在onload回调中做什么？如果要重定向到登录页面，则应使用window.location.href

Answer 3

responseText未定义。您正在尝试更改同一按钮的文本，因此需要对其进行引用。

<script type="text/javascript">
    document.getElementById("btn_cancel").onclick = function () {
        window.location.replace("/login");
    };

    var token = window.location.href.substring(window.location.href.lastIndexOf("/") + 1);
    
    var button = document.getElementById("btn_change");

    button.onclick = function () {
        var password = document.getElementById("new_password").value;
        var request = {
            token: token,
            password: password
        };
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/changePassword', true);
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.onload = (res) => {
            response = res['target']['response'];
            if (response) {
                response = JSON.parse(response);
                button.innerHTML = response.message;
                button.className = "error_text";
            } else {
                button.innerHTML = "Password changed succesfully. <a href=\"/login\">Login</a>"
                button.className = "success_text"
            }
        };
        xhr.send(JSON.stringify(request));
    };

<div 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" type="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>

Answer 4

    document.getElementById("btn_cancel").onclick = function (event) {
        event.preventDefault();
        window.location = "http://localhost:4200/";
    };

您忘记了href，window.location.href是正确的

POST方法后，按钮不起作用，页面继续加载

4 个答案: