如何修改jQuery代码实现定时获取外部内容更新到input输入框

核心原因 #

jQuery的load()方法会将请求返回的内容写入目标元素的内部HTML节点中，而<input>是单闭合标签，文本内容存储在value属性而非内部节点里，因此直接复用针对div的写法无法生效。

修改方案 #

1. JavaScript代码调整

将load()改为$.get()发起请求，请求成功后主动把返回内容赋值给input的value属性，修改后代码如下：

<script>
$(document).ready(function(){
    // 定义数据拉取与赋值方法
    function updateInputVal() {
        $.get("myurl.php", function(res) {
            // trim()用于移除返回内容首尾多余的空格、换行符，不需要可删除
            $("#torefresh").val(res.trim());
        });
    }
    // 页面加载完成后立即执行一次
    updateInputVal();
    // 每100ms刷新一次值
    setInterval(updateInputVal, 100);
});
</script>

2. HTML代码

你写的input标签不需要做任何调整，直接使用即可：

<input type='text' readonly="readonly" name='torefresh' id='torefresh'>

可选优化建议 #

• 当前设置的100ms刷新间隔频率较高，若业务允许可适当调大间隔（比如1000ms即1秒），避免频繁发起请求造成性能浪费或请求堆积。

内容的提问来源于stack exchange，提问作者Phillip Chirazo