请问不用jq能不能做到局部刷新

郑爽
  • 55

想要刷新页面中一个div内容。想局部刷新,不刷新整个页面。

不想引入jq,想用最简单的js,能不能做到?

    <div id="altContent">
        这里调用一个外部文件,随机显示图片的。刷新一次图片变的。
    </div>
    <input type="button" onclick="refsher()" value="刷新DIV" />

    <script type="text/javascript">
        function refsher() {
            document.getElementById("altContent").innerHTML = 
                document.getElementById("altContent").innerHTML;
        }
    </script>
回复
阅读 551
5 个回答
✓ 已被采纳

你那个例子不成功,是因为更改前后的内容根本没有变化,所以你也看不到“刷新效果”。
因为你图片的随机刷新是发生在服务器上的,而你这里的更改是发生在本地的。相当于你给锅里加盐巴,但是已经舀到碗里的汤并不会因此变咸。
所以你那种改法不可能拿到服务器上已经修改的图片,毕竟在没有请求的前提下,没有任何“魔法”可以神奇地得到后端的图片。你必须发起一次网络请求,来使服务器给你下发最新的图片。
下面的方法兴许有用:

async function refsher(){
    const parser = new DOMParser();
    const XML = parser.parseFromString(
        await (
            await fetch(window.location.pathname)
        ).text(),
        'text/xml'
    );
    document.getElementById("altContent").innerHTML =
        XML.getElementById("altContent").innerHTML;
}

至于有没有用,这取决于服务器如何处理你的 fetch 请求。

另一种情形,如果HTML里的图片链接不变的话,可以通过修改图片链接的 query 参数的方式刷新图片,楼上已经有人给出了方案。

dom.innerHTML = '这个元素的新内容'

用原生的ajax,比较繁琐。或者新一点的Fetch,比较简洁。
给个按钮,点击按钮请求数据,拿到数据更换img标签的src地址

加一个随机请求参数,资源是会缓存的。

比如说https://segmentfault.com/q/1010000039811463改成https://segmentfault.com/q/1010000039811463?1

难道你用 jquery就可以刷新了嘛?如果可以的话,还值得研究一下 .html 的源码。

你知道吗?

宣传栏