AJAX 不更新文本框的值答案

【问题标题】：AJAX doesn't update value of a text boxAJAX 不更新文本框的值
【发布时间】：2011-03-01 05:46:33
【问题描述】：

我想通过 AJAX 更新输入文本框的值。尽管几乎相同的 AJAX 代码仅适用于“文本”，但我无法使其正常工作。 ff 和 chrome 的行为相同。

唯一的区别是

doesn't work ---> document.getElementById("f1").value=revision;  
works fine -----> document.getElementById("f2").innerHTML=revision;
works fine too -> onClick="javascript:document.getElementById('f1').value+='B';"

示例代码：

<input type="text" name="f1" id="f1"> 
<input type="button" value="inline function"  onClick="javascript:document.getElementById('f1').value+='B';">
<input type="button" value="AJAX Button" onClick="get_revision2('trunk')">

和功能

    function get_revision2(revision)
    {
      if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
      else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange=function()
        {
        document.getElementById("f1").value=revision;

        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("f1").value=xmlhttp.responseText;

          }
        }
      xmlhttp.open("GET","http://radek:4567/svn_get_revision?code_base="+revision+"&t=" + Math.random(),true);
      xmlhttp.send();
    }

AJAX 代码不会更新文本框的值。内联函数可以。

但是对于文本（不是输入文本框），即使 AJAX 也可以正常工作。

<DIV id="f2">revision</div>
<input type="button" value="inline function" onClick="javascript:document.getElementById('f2').innerHTML+='B';">
<input type="button" value="AJAX" onClick="get_revision3('3.0')">

和功能

    function get_revision3(revision)
    {
      if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
        }
      else
        {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      xmlhttp.onreadystatechange=function()
        {
        document.getElementById("f2").innerHTML=revision;

        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("f2").innerHTML=xmlhttp.responseText;

          }
        }
      xmlhttp.open("GET","http://radek:4567/svn_get_revision?code_base="+revision+"&t=" + Math.random(),true);
      xmlhttp.send();
    }

【问题讨论】：

最简单的解释是AJAX请求失败。如果 xmlhttp.status 不是 200，请尝试添加警报
@Hans：AJAX 调用在更新文本时有效。并且在文本框值未更新的情况下，“radek”服务器接收 AJAX 调用。

标签： javascript ajax

【解决方案1】：

您是否检查过 JavaScript 控制台是否有错误？当脚本执行 AJAX 调用时，您是否可能遇到 Access-Control-Allow-Origin 错误？

如果您运行 XMLHttpRequest 的网页与 AJAX 请求的 URL 不在同一个域中，则浏览器将停止请求。跨站点 HTTP 请求受到限制。

【讨论】：

网页来自服务器“testing”，AJAX 请求发往服务器“radek”。上面我描述了如果使用“.innerHTML”更新文本，AJAX 调用会以这种方式工作。如果使用“.value”更新则不起作用
我没有收到任何错误，但让我探索更多跨站点请求。看来这就是原因……
已检查错误控制台。它应该根据限制指定错误。
我对网页服务器进行了 AJAX 调用，然后又对 radek 服务器进行了调用，现在一切正常。谢谢你。所以一定是跨站请求。实际上提出了请求，但结果可能没有被接受....恕我直言

【解决方案2】：

我无法重现您的错误。查看http://jsbin.com/ahusa4/3/edit

您确定没有其他 id 为“f1”的元素吗？也许是常见的：<form id='f1' name='f1'>

【讨论】：

错误是文本框没有更新AJAX调用的结果。应该有一个数字。字符串 'trunk' 是 AJAX 调用参数。它不能为您工作，因为您没有启动并运行服务器 radek。但是我的另一个例子是 AJAX 调用正在更新文本字段 WORKS。所以问题是为什么它不适用于文本框的价值......