Question

我有多个文字字段HTML，我从其他网页获取价值这个价值是动态的，它会继续改变，所以我需要每隔一秒自动刷新一次文本框，是可以只刷新文本框值

注意：IO.html有var1，var2等..变量值会保持变化..，我需要在Intex.html文本框中跟踪这个值

＆＃13;

    <script type="text/javascript">
              setInterval(function () {
                  $.getJSON("IO.html", function (data) {
                      if (data.var1 == true) {
                          $('#C1-Cycle').text(data.trim());
                      }
                  });
              }, 1000);
            </script>

＆＃13;

index.html
<html>
  <head>
    </head>
  <body>
    <table>
     <tr >
            <td class="C3-tap-col">
            <div>
            <input type="text" id="C1-Cycle" class="C3-tap-tex" value=''>
            Counter
            </div>
            </td>      
     </tr>
      </table>
    </body>
  </html>

＆＃13;

Answer 1

好的，通过新信息，我将您的示例一对一地重建。

我们有一个名为IO.html的值的文件，其中包含非数组json格式的变量：

{"var1": "30", "var2": "40"}

然后我们有文件index.html，它应该每秒读取IO.html的值，并在index.html的输入字段中输入值：

<html>
    <head>
        <script>
            AJAX = {
                getXmlDoc: function(){return ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"))},

                //u:= url, f:= callback
                Get: function(u, f){
                    var tDoc = this.getXmlDoc();

                    tDoc.open('GET', u, true);
                    tDoc.onreadystatechange = function(){
                        if (tDoc.readyState === XMLHttpRequest.DONE && tDoc.status === 200) f(tDoc);
                    };

                    tDoc.send();
                }
            };
        </script>

        <script type = 'text/javascript'>
            function startTimer(){
                document.body.QQ = setInterval(function(){
                    AJAX.Get('IO.html', function(r){
                        var tR = eval('[' + r.response + ']')[0]; //This is our json object of IO.html (:= {"var1": "30", "var2": "40"})

                        //Now we loop all values/key in our json and add it to the input with that id (:= var1, var2)
                        for(var k in tR){
                            //We get the input with the same id as the key..
                            //We could also create them on the fly.
                            var tE = document.getElementById(k);
                            if (tE) tE.value = tR[k];
                        }
                    })
                }, 1000)
            }
        </script>
    </head>

    <body onload = 'startTimer()'>
        <input type = 'text' id = 'var1' name = 'C1-Cycle' />
        <input type = 'text' id = 'var2' name = 'C2-Cycle' />
    </body>
</html>

现在你加载index.html，然后每秒从IO.html获取新值，并在index.html的输入字段中更新IO.html的值。

为什么与小提琴相同的代码在小提琴中起作用而不在你的服务器上我无法告诉你。通常一些路径是错误的或一些包括缺失。请注意，在本地您无法访问“/ echo / js /？js = {”var1“：”30“，”var2“：”40“}”。

以下是使用占位符和iframe的更多示例。首先是通过元刷新每秒更新的IO.html：

<html>
    <head>
        <meta http-equiv = 'refresh' content = '5'>
    </head>

    <body>
        <input type = 'text' value = ':="Datablock".counter:' />
    </body
</html>

在iframe中包含IO.html的index.html：

<html>
    <head></head>

    <body>
        <iframe src = 'IO.html'></iframe>
    </body>
</html>

自动刷新文本框值

1 个答案: