Как обновить только часть страницы с помощью GAE

Question

Я искал эту концепцию, но на самом деле не понимаю, как она работает. В моем бэкэнд используется webapp2 и GAE, и я хочу обновить страницу, которая извлекается из моей базы данных.

На странице есть другой контент, и мне нужно только обновить содержимое таблицы. В настоящее время я нахожусь с помощью

<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 сделать и показать новую таблицу (есть миллион альтернатив здесь и Я не эксперт 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, которые занимают на себе большую часть усилий! -)