Question

目前我有这段代码

// JavaScript Document

   $.ajax({

      type: 'GET',
      crossDomain: true,
      dataType: 'json',

      url: 'https://api.import.io/store/data/93296dfc-1edb-4aa6-a3e5-2207fa52f3ea/_query?input/webpage/url=http%3A%2F%2Fwww.seatwave.com%2Fthe-script-tickets%2Fseason&_user=687c839c-f236-4817-90c9-f6eb81334c2a&_apikey=pvXHYMTbZD3Za3TB%2Bn8LgVybPltV1a379yBNfSfzepw2piIhs%2FxHinVseH7G4BwItVQ57aNJnyk6g6g%2BAxyEMg%3D%3D',

      success: function (json) {
           //var json = $.parseJSON(data);
           for(var i =0;i < json.results.length;i++) {
             var title = json.results[i].name;
             var venue = json.results[i].venue;
                 var date = json.results[i].date;
                    var button = "<button class='btn btn-info' data-url='"+(i+1)+".html'>Compare</button>";

             $("#apple").append("<tbody><tr><td>"+title+"</td><td>"+venue+"</td><td>"+date+"</td><td>"+button+"</td></tr></tbody>");
$("#apple").find(".btn.btn-info").click(function(){
   location.href = $(this).attr("data-url");
});
           }
     },
     error: function(error){
          console.log(error);
     }
   });

这会将URL附加到表中。但是，正如您在此处看到的此代码data-url='"+(i+1)+".html'创建了按钮，其中列出的按钮数量增加了1。

问题是，这个api每5小时更新一次。当事件通过时，需要真正更新按钮。否则整个网站都会中断。

所以问题是我怎样才能使链接唯一并在事件通过时更新？虽然我写这个我相信我可以只使用日期功能，所以代码将是

data-url='"+date+".html'

其他任何建议都会很棒吗？

Answer 1

有很多方法可以做到这一点。最简单的方法是向页面添加meta tag，强制每5小时刷新一次。如果由于某种原因你需要使用代码，那么你需要添加一个检查更新和刷新按钮数据的计时器。其示例如下所示。数据确实有一个时间戳，但它设置为遥远的未来。因此，不要检查代码是否每10秒更新一次（您可以设置为您需要的任何频率）。

<html>
  <body>
    <style type="text/css">
      table { border-collapse: collapse; font-family: sans-serif; font-size: 12px;}
      table td { border: 1px gray dotted; padding: 2px;background-color:aliceblue;}
      table caption {font-weight: bold; color: firebrick;}
    </style>
    
    <table id="apple"><caption></caption><tbody></tbody></table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    
<script type="text/javascript">
  
  var lastUpdate;
  
  function update() {

   $.ajax({

      type: 'GET',
      crossDomain: true,
      dataType: 'json',

      url: 'https://api.import.io/store/data/93296dfc-1edb-4aa6-a3e5-2207fa52f3ea/_query?input/webpage/url=http%3A%2F%2Fwww.seatwave.com%2Fthe-script-tickets%2Fseason&_user=687c839c-f236-4817-90c9-f6eb81334c2a&_apikey=pvXHYMTbZD3Za3TB%2Bn8LgVybPltV1a379yBNfSfzepw2piIhs%2FxHinVseH7G4BwItVQ57aNJnyk6g6g%2BAxyEMg%3D%3D',

      success: function (json) {
        
          /*
            Removed - data time stamp does not appear to be useful
            if (json.results[0].date == lastUpdate) return;
            lastUpdate = json.results[0].date;
            $("#apple caption").html( 'Last Updated: ' + lastUpdate );
          */
        
           $("#apple caption").html( "Last Updated: " + (new Date()).toString() );
        
           $("#apple tbody").html( "" );

        for(var i =0;i < json.results.length;i++) {
             var title = json.results[i].name;
             var venue = json.results[i].venue;
                 var date = json.results[i].date;
             
             var button = "<button class='btn btn-info' data-url='"+(i+1)+".html'>Compare</button>";

             $("#apple tbody").append("<tr><td>"+title+"</td><td>"+venue+"</td><td>"+date+"</td><td>"+button+"</td></tr>");
$("#apple").find(".btn.btn-info").click(function(){
   location.href = $(this).attr("data-url");
});
           }
     },
     error: function(error){
          console.log(error);
     }
   });
    
    
}
  
  update();
  
  var timerId = setInterval( update, 10000 );
  
  
</script>
    
    
</body>
</html>

特定日期后Json表更新

1 个答案: