对于一个图库来说, 导航是非常重要的 利用 AJAX 技术可以让导航更加人性化,更快的找到需要的位置.
下面就用一个简单的数据表,模拟图库的导航.
model.py class Images(SQLObject): name = StringCol(unique=True,notNone=True) time = DateTimeCol(alternateID=True,unique=True,notNone=True
这个简单的表只定义了两个字段(name和time, 分别代表路径与更新时间),但已经可以说明问题了
gal.py class Gallery(controllers.Controller): @expose(template="t.templates.fy") def index(self): dt = datetime.now() tab = Images img = tab.select(tab.q.time < = dt, orderBy=tab.q.time).reversed()[0] return dict(image=img)
index页面,返回最新的图片.
# 一次读取定长的列表,用于AJAX @expose(template="json") def prevlist(self, n): t = parse_datetime(n) #将图片名转化为时间方便数据库的查询 tab = Images prev_bunch = tab.select(tab.q.time < t, orderBy=tab.q.time).reversed()[:Bunch_Size] return dict(list=prev_bunch)
根据当前图片查询之前一定数量的图片.
在config/app.cfg中加入 tg.mochikit_all = True 让所有的tg页面默认加载MochiKit
gal.kid <js部分> function prev_more () { var image_name = scrapeText("image"); var p = loadJSONDoc("${std.url('/gal/prevlist?n=')}" + image_name); p.addCallback(list_more); }; function list_more (output) { var list = UL(null, map(row_display, output["list"])); replaceChildNodes("prevlist", list); }; function row_display(image) { var updateImage = function() { replaceChildNodes("fyimg", image['name']) }; return LI(null, A({"href":"#", "onclick" : updateImage}, image["name"])); };
gal.kid <body部分> <div id="image" py:content="image.name">在这里显示图片</div> <div> <div> <a href="#" onclick="return prev_more()" id="prevmore"><<</a> <div id="prevlist"></div> </div> </div>
点击 “prevmore” 会调用prev_more()函数. prev_more() :: 先通过url调用 server上的prevlist(),得到json格式的输出(可以通过”/gal/prevlist?n=%name”查看). 然后使用addCallback()将输出json定向到list_more()函数
list_more() :: 使用字典的方式处理json的输出信息,再通过mochikit的DOM模块更新网页.
这里只是一个简单的使用json的异步更新的例子,AJAX的内容还有很多很多,慢慢学吧. 下一步应该是学学ui这方面吧~