HTML In Page 在使用 AJAX 更改内部 HTML 后恢复为原始 HTML

HTML In Page reverting to original HTML after innerHTML changed with AJAX

本文关键字：HTML 内部 恢复 原始 AJAX Page In      更新时间：2023-09-26

也许这是使用HTML表单和AJAX之间的不兼容，但是我已经单独使用这些方法没有问题。 我正在尝试将表单字段的输入设置为 JS 变量，在 php 脚本中执行 AJAX 以确认客户端的密码，然后在成功时更改原始页面上的 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>

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

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

删除表单，将sumbit输入更改为常规类型="按钮"输入和利润

<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的情况下编写了上面的代码

这是因为当您提交表单时，您的页面会自动重新加载。并且的默认行为是提交当前表单，即使 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

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

<form onsubmit="event.preventDefault(); pass();" autocomplete="off">
相关文章：