我完全是AJAX的新手。我熟悉HTML / CSS,jQuery和GAE和Python的初学者。
为了理解AJAX的工作原理,我想知道如何在下面的示例中使用AJAX(实际代码)。让我们使用类似于reddit的示例,其中上下左右投票被弃用:
这是故事种类:
class Story(ndb.Model): title = ndb.StringProperty(required = True) vote_count = ndb.IntegerProperty(default = 0)
HTML看起来像这样:
<h2>{{story.title}}</h2> <div> {{story.vote_count}} | <a href="#">Vote Up Story</a> </div>
AJAX如何容纳在这里?
好吧,先生,我们走了…一个带有一个故事和无限投票的简单应用… ;-)
app.yaml
application: anotherappname version: 1 runtime: python27 api_version: 1 threadsafe: true default_expiration: "0d 0h 5m" libraries: - name: jinja2 version: latest - name: webapp2 version: latest handlers: - url: .* script: main.app
main.py
import logging from controllers import server from config import config import webapp2 app = webapp2.WSGIApplication([ # Essential handlers ('/', server.RootPage), ('/vote/', server.VoteHandler) ],debug=True, config=config.config) # Extra Hanlder like 404 500 etc def handle_404(request, response, exception): logging.exception(exception) response.write('Oops! Naughty Mr. Jiggles (This is a 404)') response.set_status(404) app.error_handlers[404] = handle_404
models/story.py
from google.appengine.ext import ndb class Story(ndb.Model): title = ndb.StringProperty(required=True) vote_count = ndb.IntegerProperty(default = 0)
controllers/server.py
import os import re import logging import config import json import webapp2 import jinja2 from google.appengine.ext import ndb from models.story import Story class RootPage(webapp2.RequestHandler): def get(self): story = Story.get_or_insert('Some id or so', title='A voting story again...') jinja_environment = self.jinja_environment template = jinja_environment.get_template("/index.html") self.response.out.write(template.render({'story': story})) @property def jinja_environment(self): jinja_environment = jinja2.Environment( loader=jinja2.FileSystemLoader( os.path.join(os.path.dirname(__file__), '../views' )) ) return jinja_environment class VoteHandler(webapp2.RequestHandler): def post(self): logging.info(self.request.body) data = json.loads(self.request.body) story = ndb.Key(Story, data['storyKey']).get() story.vote_count += 1 story.put() self.response.out.write(json.dumps(({'story': story.to_dict()})))
最后
views/index.html
<!DOCTYPE html> <html> <head> <base href="/"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <h2>{{story.title}}</h2> <div> <span class="voteCount">{{story.vote_count}}</span> | <a href="javascript:VoteUp('{{story.key.id()}}');" >Vote Up Story</a> </div> <script> function VoteUp(storyKey){ $.ajax({ type: "POST", url: "/vote/", dataType: 'json', data: JSON.stringify({ "storyKey": storyKey}) }) .done(function( data ) { // check why I use done alert( "Vote Cast!!! Count is : " + data['story']['vote_count'] ); $('.voteCount').text(data['story']['vote_count']); }); }; </script> </body> </html>
组装,阅读它就足够简单并运行。如果您需要一个可行的git示例,请发表评论。
githublink(从评论)