提交按钮(Ajax)只能工作一次

时间:2011-01-07 06:19:22

标签: php javascript ajax forms

这是我简单的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替换了'request',如果我多次单击该按钮,它会在Firebug中注册。我还用一个annon函数替换了'request',这个函数会弹出一个警告框,并且可以按下多个按钮...我只是不知道为什么我的'request()'函数没有被第二次调用。

1 个答案:

答案 0 :(得分:0)

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

当你这样做时

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

它用新的DOM树替换整个文档正文,这将导致脚本和形成dom被新的dom树替换。

实际上你想在ajax请求结束时做什么。我不明白你为什么要更换整个文件。