使用 AJAX 更改 innerHTML 后，页面中的 HTML 恢复为原始 HTML答案

【问题标题】：HTML In Page reverting to original HTML after innerHTML changed with AJAX使用 AJAX 更改 innerHTML 后，页面中的 HTML 恢复为原始 HTML
【发布时间】：2016-01-26 05:13:17
【问题描述】：

也许这是使用 HTML 表单和 AJAX 之间的不兼容，但我已经分别使用这些方法没有问题。我正在尝试将表单字段的输入设置为 JS 变量，执行 AJAX 以在 php 脚本中确认客户端的密码，然后成功更改原始页面上的 html。 AJAX 调用工作正常，但在我的 div 中切换 HTML 后，页面会立即恢复到其原始状态（即它再次显示表单而不是函数生成的 HTML）。

这是我不能使用这种类型的表单然后在不刷新的情况下停留在同一页面的问题吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    var pw;
    var ptest;

    function pass() {
        pw = document.getElementById("pwd").value;

        alert(pw);
        $.ajax({
            url: "login.php",
            type: "POST",
            data: { password : pw
            },
            dataType: 'text',
            success: function (data) {

                document.getElementById("stuff").innerHTML = data;
            },
            error: function () { document.getElementById("stuff").innerHTML = 'fail'; }
        });
                alert("xx");
    }
</script>

<html>
<body>

<br><br>
<div id="stuff"> 
<form onsubmit="pass()" autocomplete="off">
    <label>Password: <input type="password" id="pwd"></label><br><br>
    <input type="submit" />
</form>

</div>
</body>
</html>

【问题讨论】：

表单重新加载，没有其他操作。 JS 使用从我的 php 文件中检索到的 html 在 ajax 成功时正确更改 html，它会闪烁到新的 html，然后使用原始表单重新加载
在没有任何操作的情况下单击表单中的提交按钮会有效地重新加载页面 - 因为您没有任何操作，为什么还需要表单？
我猜你是用你的 suibmt 函数调用 ajax 然后提交表单。将您的按钮更改为调用 ajax 的常规按钮
是的，我猜它正在重新加载而没有任何操作命令。谢谢大家的解释

标签： javascript html ajax forms

【解决方案1】：

您需要捕获事件并阻止默认操作。表单提交会触发浏览器重新加载。

function pass(e){ e.preventDefault(); }

【讨论】：

因为 pass 函数是从 onsubmit="pass()" 调用的 - 它不会获取事件参数
非常正确和不错的收获。作者需要用到$('form').submit(pass);的效果
... 并删除标记中的onsubmit="pass()"

【解决方案2】：

移除表单，将 sumbit 输入改为常规 type="button" 输入和利润

<html>
<body>

<br><br>
<div id="stuff"> 
    <label>Password: <input type="password" id="pwd"></label><br><br>
    <input type="button" onclick="pass()" value="submit"/>

</div>
</body>
</html>

为了另一种选择 - 对更复杂的形式有用（也许）。这使用 e.preventDefault - 正如@TateThurston 在他的回答中首先建议的那样

<html>
    <head>
        <script>
            var pw;
            var ptest;

            function pass(e) {
                // stop the submission in it's tracks
                e.preventDefault();
                pw = document.getElementById("pwd").value;

                $.ajax({
                    url: "login.php",
                    type: "POST",
                    data: { password : pw },
                    dataType: 'text',
                    success: function (data) {
                        document.getElementById("stuff").innerHTML = data;
                    },
                    error: function () { 
                        document.getElementById("stuff").innerHTML = 'fail'; 
                    }
                });
            }
        </script>
    </head>
    <body>
        <br><br>
        <div id="stuff"> 
            <form id="myform" autocomplete="off">
                <label>Password: <input type="password" id="pwd"></label><br><br>
                <input type="button" value="Submit"/>
            </form>
        </div>
        <script>
            // this code needs to appear AFTER the form, so getElementById should work. 
            // A better solution is to wait for DOMContentLoaded event on document to do such event bindings
            // attach submit event listener to the form (added id to form to make this trivial)
            document.getElementById('myform').addEventListener('submit', pass);
        </script>
    </body>
</html>

附：我注意到您加载了 jQuery，但使用 document.getElementById 而不是 jQuery 函数 - 我也编写了上面没有 jQuery 的代码

【讨论】：

成功了，绝对没有必要在那儿有表格。感谢帮助
别误会，表单可以用在更复杂的例子中——表单元素的存在可以让事情变得简单——@TateThurston 的回答虽然有一个小缺陷，但确实指向一个处理具有要阻止默认提交操作的表单的替代方法。仅仅对于这样一个简单的“表单”，没有表单元素和所需的变通方法可能要容易得多

【解决方案3】：

这是因为当您的表单提交时，您的页面会自动重新加载。并且默认行为是即使附加了Javascript事件也提交当前表单这也发生在我很久以前所以试试这个代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    var pw;
    var ptest;

    function pass() {
        pw = document.getElementById("pwd").value;

        alert(pw);
        $.ajax({
            url: "login.php",
            type: "POST",
            data: { password : pw
            },
            dataType: 'text',
            success: function (data) {

                document.getElementById("stuff").innerHTML = data;
            },
            error: function () { document.getElementById("stuff").innerHTML = 'fail'; }
        });
    }
</script>

<html>
<body>

<br><br>
<div id="stuff"> 
<form autocomplete="off">
    <label>Password: <input type="password" id="pwd"></label><br><br>
    <input type="button" value="Submit" onclick = "pass()" />
</form>

</div>
</body>
</html>

诀窍是更改 to 并将 pass() 的调用从 onsubmit 更改为 onclick

【讨论】：

【解决方案4】：

如果可以取消，preventDefault() 方法将取消该事件，这意味着属于该事件的默认操作不会发生。使用此代码：

<form onsubmit="event.preventDefault(); pass();" autocomplete="off">

【讨论】：

好吧，该死的..事件不是未定义的！ - 学习新事物是我回来的动力