如何使用GAE僅刷新頁面的一部分

Question

我搜索了這個概念，但是並不清楚它是如何工作的。 我的后端使用的是webapp2和GAE，我想刷新一個從數據庫中提取的頁面。

頁面上還有其他內容，我只需要專門刷新表內容即可。 我目前正在使用

    <meta http-equiv="refresh" content="10">

每10秒刷新整個頁面，但是我需要只刷新頁面一部分的內容。 任何JS或JQuery添加的解釋都很棒！

我真正不了解的部分是我必須在后端進行更改以允許這種刷新。

Answer 1

一個簡單的HTML占位符：

<div id="tablehere"></div>

每10秒進行AJAX輪詢的Jquery代碼：

setInterval(function(){
    $.ajax({ url: "http://yourapp.appspot.com/thetable",
             success: function(data) {
               maketable(data);
             }
          });
}, 10000);

JS制作並顯示一張新表（這里有上百萬種選擇，我不是JS專家，這只是一種方法）：

maketable = function(data) {
  var tabdiv = document.getElementById("tablehere");
  var tabhead = '<table><thead><tr><th>Col1</th><th>Col2</th></tr></thead><tbody>';
  for(var i=0,len=data.length; i<len; i++) {
    tabhead += '<tr><td>' + data[i].col1 + '</td><td>' + data[i].col2 + '</td></tr>';
  }
  tabhead += '</tbody></table>';
  tabdiv.innerHTML = tabhead ;
}

就是這樣，客戶端。

服務器端， app.yaml將具有處理程序

url: /thetable
script: thetable.app

然后在thetable.py完成所有需要的導入：

class Tablerow(ndb.Model):
    col1: ndb.StringProperty()
    col2: ndb.StringProperty()

class Tablehandler(webapp2.RequestHandler):
    def get(self):
        data = [tr.to_dict() for tr in Tablerow.query().iter()]
        response.write(json.dumps(data))

app = webapp2.WSGIApplication([('/thetable', Tablehandler)])

ew-非常骨骼，但仍然花了我一段時間。 但是正如您所看到的那樣，應用程序引擎部分確實微不足道-只是HTML，Javascript和Jquery方面，這需要大量的工作！-）