【问题标题】:auto refresh json without reload自动刷新json而不重新加载
【发布时间】:2015-12-16 20:03:38
【问题描述】:

我正在尝试创建一个自动刷新 json,它每 5 秒重新加载一次更改。它在第一次加载时完美加载,但我的 setinterval 工作不正常。它每 5 秒运行一次,但即使进行了更改,它也不会更新我的菜单? .

这是我目前得到的:

 $(document).ready(function(load) {

    var dmJSON = "example.com";

    $.getJSON( dmJSON, function(data) {


    setInterval(function () {
      $(news).html(""); 
      $.getJSON();         
    }, 5000);

    var html = '';

 // loop through all the news items, and append the 
 // title and published date to the html variable.

 for(var i = 0; i < data.feed.data.length; i++){

    html += '<div style="width: 600;direction: rtl;background-color: white;padding: 12px 12px 0;border: 1px solid;border-color: #e5e6e9 #dfe0e4 #d0d1d5;border-radius: 4px;margin-bottom: 20px;color: black;">';

    html += '<span style="/* text-align: left; */direction: rtl;position: absolute;left: 250px;"> ' + data.feed.data[i].created_time + ' </span><span><img alt="" src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Network-Globe-Disconnected-icon.png" style="background-size:auto;background-repeat: no-repeat;display: inline-block;height: 20px;width: 20px;position: absolute;left: 490px;padding-top: 9px;" /></span>' ;

    html += '<br>' ;

    html += data.feed.data[i].message ;

    html += '<p><img alt="" src=' + data.feed.data[i].picture + ' /></p>';

    html += '</div>';

 }

 // append all the html variable to the ticker div.
    $("#news").append(html);
 });

 });

我使用此代码,但刷新时他给了我的空白页面

setInterval(function () {
  $(news).html(""); 
  $.getJSON();         
}, 5000);

【问题讨论】:

  • var dmJSON = "https://";为什么url是空的?
  • 我认为您需要使用参数调用 getJSON。在您的 setInterval 回调中,您无需任何参数即可调用它。
  • @JohnnyAW 我有网址但我删除了
  • 好吧,可以写类似example.com
  • 另外,为什么还要在 getJSON 回调中设置间隔? setInterval 与 setTimeout 不同,它将每隔 n 秒重复一次回调函数调用。

标签: javascript jquery json


【解决方案1】:

试试这个:

$(document).ready(function(load) {

 var dmJSON = "https://";
 function fetch() {
   $.getJSON( dmJSON + (+new Date()), function(data) {
     $("#news").html('');
     var html = '';

     // loop through all the news items, and append the 
     // title and published date to the html variable.

     for(var i = 0; i < data.feed.data.length; i++){

         html += '<div style="width: 600;direction: rtl;background-color: white;padding: 12px 12px 0;border: 1px solid;border-color: #e5e6e9 #dfe0e4 #d0d1d5;border-radius: 4px;margin-bottom: 20px;color: black;">';

         html += '<span style="/* text-align: left; */direction: rtl;position: absolute;left: 250px;"> ' + data.feed.data[i].created_time + ' </span><span><img alt="" src="http://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Network-Globe-Disconnected-icon.png" style="background-size:auto;background-repeat: no-repeat;display: inline-block;height: 20px;width: 20px;position: absolute;left: 490px;padding-top: 9px;" /></span>' ;

         html += '<br>' ;

         html += data.feed.data[i].message ;

         html += '<p><img alt="" src=' + data.feed.data[i].picture + ' /></p>';

         html += '</div>';

      }

      // append all the html variable to the ticker div.
      $("#news").append(html);
   });
 }
 setInterval(fetch, 5000);// call fetch every 5 seconds
 fetch(); // call fetch first time
});

【讨论】:

  • 听起来不错,但我会在数据到达后清空 html,而不是在 json-call 之前
  • 另外,检查 API 调用状态码和响应。状态码 304 表示缓存的响应。要明确清除它,您可以做一件事。每次调用发生时,在您点击的 URL 中附加时间戳参数。这将确保调用响应不会被缓存。
  • @JohnnyAW 他的作品,我等着看新的更新而无需重新加载
  • @aligassan 它会工作,但你可能会有几秒钟的空白屏幕,直到 ajax 为你提供数据
猜你喜欢
  • 2011-05-17
  • 1970-01-01
  • 2013-02-22
  • 1970-01-01
  • 2011-11-29
  • 1970-01-01
  • 2014-10-23
  • 2021-10-29
  • 2012-03-06
相关资源
最近更新 更多