Ajax 通过 post 将文本从一个文本区域复制到另一个文本区域答案

【问题标题】：Ajax copy text from one textarea to another via postAjax 通过 post 将文本从一个文本区域复制到另一个文本区域
【发布时间】：2015-07-30 19:37:08
【问题描述】：

我正在尝试使用 ajax 将文本从一个文本区域发布到 php 页面以回显到另一个文本区域。当我这样做时，它适用于大约 5 个字符，然后完全停止。我试过编码和不编码似乎没有什么区别，因为我只是在尝试简单的计划文本，比如“ddddddddddd”。

在example.html中

<!DOCTYPE html>
<html>
<body>
<style>
.center{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}

</style>

<div class="center">

<textarea   onkeyup="changed()" onkeydown="changed()" onkeypress="changed()"  id="b1" rows="30" cols="81">
</textarea>

<textarea id="b2" rows="30" cols="81">
</textarea>

</div>

</body>
</html>
<script>
function changed(){

var text =document.getElementById("b1").value;

if(!text){
text ="";
}

     var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {

                document.getElementById('b2').value =xhr.responseText;

        }
    }

    xhr.open('POST', 'echo.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("text=" + text);



}

</script>

在 echo.php 中

<?php 
 $mytext = $_POST["text"];
 echo $mytext;

?>

我看过几个类似的帖子，但没有一个能解决我的问题。我没有使用表格。我一定要吗？ Textarea not POSTing with form

【问题讨论】：

您的意思是在 echo.php 文件中的 '$my' 和 'text' 之间有一个空格吗？
当我把它复制到这个页面时，我很糟糕，我必须手指一个空格。那不是实际代码中的问题。谢谢你！
每次击键发送三个请求是个非常糟糕的主意。您的服务器将很难处理所有这些请求，并且它们将出现竞争条件。
限制你的ajax调用github.com/cowboy/jquery-throttle-debounce
我会考虑这个建议。我还不知道 jQuery，但我可以看到你在说什么。感谢您的意见！

标签： javascript php html ajax

【解决方案1】：

我不知道您要做什么，但是如果您将脚本更改为以下内容，则可以以更少的要求获得相同的输出：

<script>
function changed(){
    var text =document.getElementById("b1");
    if(!text){
       text ="";
    }
    else
    {
        text=text.value;
    }
    var text2 =document.getElementById("b2");
    if(!text2)
    {
       text2.value=text;
    }
}
</script>

希望对你有帮助。

编辑

现在发现错误了，好像你的ajax请求是随机返回的。

我输入了 'asd' = 它会触发一个 ajax
键入 'asdf' = 它将触发另一个 ajax

现在错误发生在第二个 ajax 先响应时，所以第二个 text-area 的值一开始会是 'asdf'，但后来在第一个 ajax 响应时，它会将当前值覆盖为 'asd'。

要解决这个问题，请将您的脚本更改为：

    <script>
    var pending_request=false;
    function changed(){
    if(pending_request==false)
    {
        var text =document.getElementById("b1").value;
        if(!text){
            text ="";
        }
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            throw new Error("Ajax is not supported by this browser");
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById('b2').value =xhr.responseText;
                pending_request=false;
            }
        }
        pending_request=true;
        xhr.open('POST', 'echo.php');
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("text=" + text);
    }
    else
    {
      setTimeout(function(){ changed(); }, 3000);
    }
   }
   </script>

demo here

这个想法是等待未决的 ajax 请求响应，然后再发送另一个 :D

PS：对不起，我的英语不好。

【讨论】：

【解决方案2】：

我进行了 VMcreator 建议的更改并看到了重大改进，但它仍然会“崩溃”。防止接收任何其他字符。我在他的演示中尝试了相同的步骤。它工作得很好。我决定尝试在另一个托管服务提供商上托管我的页面和 php 脚本，它成功了！

我打电话给我的托管服务提供商 (godaddy)，他们说由于服务器正在接收来自同一 IP 的快速请求，因此被他们的垃圾邮件过滤器拒绝。尽管我的 ip 没有被阻止，但我的许多请求都被阻止了，导致更糟糕的竞争条件。

即时解决方案 - 切换托管服务提供商

长期解决方案 -（尚未发生）更改安全设置以接受请求。

【讨论】：

您好，先生，我建议您为此使用 websocket。仅将 ajax 与 client->server 一起使用，但如果您需要反之发送，则需要 websocket。这可能是您正在寻找的长期解决方案。 - 我很高兴能帮上忙 :)