繁体   English   中英

如何使用GAE仅刷新页面的一部分

[英]How to refresh only part of page using GAE

我搜索了这个概念,但是并不清楚它是如何工作的。 我的后端使用的是webapp2和GAE,我想刷新一个从数据库中提取的页面。

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

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

每10秒刷新整个页面,但是我需要只刷新页面一部分的内容。 任何JS或JQuery添加的解释都很棒!

我真正不了解的部分是我必须在后端进行更改以允许这种刷新。

一个简单的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方面,这需要大量的工作!-)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM