刷新社交 div 而不刷新整个页面答案

【问题标题】：Refresh social div without refreshing whole page刷新社交 div 而不刷新整个页面
【发布时间】：2013-11-23 08:45:18
【问题描述】：

我对该主题进行了一些搜索，大多数解决方案都涉及另一个 html。我的hoever只涉及一页html。在这里。

我在 index.html 中的当前代码

<body>

<script type="text/javascript">
    setTimeout(function () { 
      location.reload(true);
    }, 20 * 1000);
</script>

<div id="wall">
    <div id="igstream"></div>
</div>

</body>

此页面每 20 秒自动刷新整个页面。 igstream 是一个 div，每次有人发布带有目标标签的帖子时都会更新它。所以例如我访问

index.html?tags=tagsforlikes

该页面将显示来自 Instagram 的带有 tags=tagsforlikes 的图像，并且每 20 秒刷新一次，以便能够显示来自 instagram 的带有 tags=tagsforlikes 的新帖子

目前为止这工作，但我想通过只刷新 div 部分来增强它

<div id="igstream"></div>

我想这样做是因为我重新设计了在页面上包含大图像背景的页面。希望通过仅刷新 div 部分来节省带宽。

谢谢

【问题讨论】：

标签： javascript ajax

【解决方案1】：

可以使用，jquery load()函数，

$( "#igstream" ).load( "yourfile link here" );

http://api.jquery.com/load/

【讨论】：

【解决方案2】：

Ajax 是最简单的方法。只需将社交部分放入仅包含内容的页面，并在获得新内容后使用 elem.innerHTML 对其进行更新。

【讨论】：

听起来很有趣。你能给个样品吗？谢谢
@CharlesWayne，我可以给你举个例子，但这对你没有多大帮助。因为您不能将新内容分离到另一个页面中，所以您需要“挖掘”每个重新加载的页面，并得到您想要的。 W3Schools 是一个很好的起点，然后是 Google。 w3schools.com/ajax

【解决方案3】：

我认为你能够做到这一点的唯一方法是使用 ajax 调用，为了简单起见，这是使用 jquery，但你可以通过多种不同的方式做到这一点。

$url = ''; //wherever you are getting the data from.
var request = $.ajax({
  url: $url,
  type: "GET",
});
request.done(function(r) {
/// update your div with retrieved content in "r"
});

【讨论】：

//无论您从哪里获取数据。我需要刷新的相同网址
您的页面是您的来源？听起来 instagram 更像是源数据。您应该使用 istagram API 示例 URL $tag = 'tagsforlikes' $token = '' //instagram token get from instagram.com/developer/ $count = 20 //返回的项目数 $url = 'api.instagram.com/v1/tags/'.$tag.'/media/recent/…;

【解决方案4】：

试试这个

<body>

<script type="text/javascript">
  window.setInterval(function(){
  $( "#igstream" ).load( "index.html?tags=tagsforlikes" );
  }, 20 * 1000);
</script>

<div id="wall">
    <div id="igstream"></div>
</div>

</body>

【讨论】：

感谢您的回复，但这种方法会一次又一次地添加整个页面及其头部元素。我需要一些只将 igstream 部分重新加载到同一页面的东西。

【解决方案5】：

 window.setInterval(function(){
 $( "#igstream").load("test.html");
 }, 1000);

这将每 1000 毫秒用 test.html 中的内容刷新您的 div 'igstream'

【讨论】：