提交按钮（Ajax）只工作一次答案

【问题标题】：Submit button (Ajax) only works once提交按钮（Ajax）只工作一次
【发布时间】：2011-01-07 06:19:22
【问题描述】：

这是我的简单 HTML 表单和 JS：

<body>
    <form>
        <label for="usrtext">Enter text here:</label>
        <br />
        <textarea name="usrtext" id="usrtext" rows="25" cols="100"></textarea>
        <br />
        <button id="btn" type="button">Send</button>    
    </form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = request;

        function request()
        {
            var xhr = new XMLHttpRequest();

            var usrtext = document.getElementById("usrtext").value;

            xhr.open("GET", "sampleb.php?usrtext="+usrtext, true);

            xhr.onreadystatechange = function(aEvt)
             {
                if (xhr.readyState == 4)
                {
                    if (xhr.status == 200)
                    {
                        var temptxt = document.body.innerHTML;
                        document.body.innerHTML = temptxt + xhr.responseText;
                    }
                }
             }

            xhr.send('');
        }
    </script>
</body>

这是 php 页面 (sampleb.php)：

<?php

if (isset($_REQUEST["usrtext"]))
{
    $output = $_REQUEST["usrtext"];
}

echo $output;
?>

我遇到的问题是，当您在文本框中输入文本并提交时，php 页面会获取文本并将其发送回去。但这只适用于第一次。如果我在文本框中输入新文本并单击提交按钮，则 ajax 调用似乎第二次不起作用。

我对此很陌生，但我用 console.log 替换了“请求”，如果我多次单击该按钮，它会在 Firebug 中注册。我还将'request'替换为一个显示警报框的annon函数，该函数可在多次单击按钮时工作......我只是不知道为什么我的'request（）'函数没有被第二次调用。

【问题讨论】：

标签： php javascript ajax forms

【解决方案1】：

您正在替换 ajax 回调中的整个文档正文。这意味着您注册的点击事件也丢失了。您必须重新注册活动。

当你这样做时

var temptxt = document.body.innerHTML;
document.body.innerHTML = temptxt + xhr.responseText;

它将整个文档正文替换为新的 DOM 树，这将导致脚本和表单 dom 被替换为新的 dom 树。

其实你想在 ajax 请求结束时做什么。我不明白为什么你必须替换整个文档。

【讨论】：

啊，我明白了。那么，只是为了确认一下，在没有新页面加载的情况下创建新的 DOM 树时，浏览器不会再次重新执行 HTML 和 JS 了吗？
不，您有效地删除了现有的 html 和脚本，并在此处用新内容替换它们。你的实际要求是什么？在正常情况下，我们不会替换整个document.body.innerHTML，而是仅替换document 的一部分。例如：页面中特定div内的内容