如何使用GAE只刷新部分页面

Question

我搜索过这个概念，但不太了解它的具体工作原理。我的后端正在使用 webapp2 和 GAE，我想刷新从我的数据库中提取的页面。

页面还有其他内容，我只需要专门刷新table个内容即可。我目前正在使用

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

每 10 秒刷新整个页面，但我需要只刷新部分页面的东西。任何 JS 或 JQuery 添加的解释都很棒！

我真的不明白的部分是我必须在后端更改什么才能允许这种刷新。

Answer 1

一个简单的 HTML 占位符：

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

Jquery 代码 AJAX - 每 10 秒轮询一次：

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

JS 制作并展示一个新的 table（这里有上百万种选择，我不是 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)])

呸——很瘦，但还是花了我很多时间来写。但是正如您所看到的，应用程序引擎部分真的很微不足道——它是 HTML、Javascript 和 Jquery 方面，它们花费了大部分工作！-)

如何使用GAE只刷新部分页面

How to refresh only part of page using GAE

javascript

python

google-app-engine

web