Django Web开发【6】使用Ajax增强用户体验
Ajax及其优点
Ajax实际上就是指异步Javascript与XML，它包含以下技术：
- HTML与CSS
- Javascript
- XMLHttpRequest
- XML
Ajax技术让客户端与服务器实现在后端通信，而不需要每次发送请求的时候都重载整个页面。Ajax有以下优点：
- 更好的用户体验
- 更好的性能，只需重新加载部分页面，而不是整个页面。
在Django中使用Ajax框架
这一节我们将选择合适Ajax框架，这一步不是必须的，但是使用Ajax框架使运用ajax更加简单，下面是使用Ajax框架的优点：
- Javascript在不同浏览器中的实现是不一样的，使用Ajax框架可以屏蔽这其中的差异，这样一样，开发者只需要专注于代码的实现而不用考虑浏览器的差异与限制。
- Javascript的标准函数与类比较少，而ajax库提供了大量的函数与类，既然轮子已经准备好了，又何必重新发明轮子呢？
现在网络中有很多种js框架，如prototype、jQuery等等，这里我们选用jQuery，因为jQuery是一个轻量库，而且拥有广大的用户群，以及众多插件。
下载安装jQuery
从http://jquery.com/ 中下载最新的jQuery。将jquery.js放到/static/中，然后在基础模板中引用jquery.js，编辑templates/base.html。
<head> <title>Django Bookmarks | {% block title %}{% endblock %}</title> <link rel="stylesheet" href="/site_media/style.css" type="text/css" /> <script type="text/javascript" src="/static/jquery.js"></script> </head>
在上面的html中添加如下代码（红色部分），以方便在以后的页面中引用自身创建的js文件。
<head> <title>Django Bookmarks | {% block title %}{% endblock %}</title> <link rel="stylesheet" href="/site_media/style.css" type="text/css"/> <script type="text/javascript" src="/site_media/jquery.js"> </script> {% block external %}{% endblock %} </head>
关于jQuery的知识，这里就不再详述，请自己查阅相关文档。
实现Bookmarks的实时搜索
我们将使用ajax实现bookmarks的实时搜索功能，它的内部原理很简单:当用户输入要搜索的关键字时，脚本就在后端工作，发送请求并获取结果返回，然后展示在同一个页面中，搜索结果不会重新加载页面，因此能够节省流量，并提供更好的用户体验。
在开始编码之前，要记得一个原则，那就是必须编写的代码应该能够在ajax不支持的情况下也能正常工作，当然现在一般浏览器都支持ajax，这个问题也不是那么重要了。
实现搜索
我们编写一个简单的例子，通过标题名查找bookmarks。首先，创建一个搜索表单，编辑bookmarks/forms.py，添加如下代码：
class SearchForm(forms.Form): query = forms.CharField( label='Enter a keyword to search for', widget=forms.TextInput(attrs={'size': 32}) )
搜索表单只有一个字段，查找用到的关键字。
接下来，创建视图函数，编辑bookmarks/views.py，添加如下代码：
def search_page(request): form = SearchForm() bookmarks = [] show_results = False if request.GET.has_key('query'): show_results = True query = request.GET['query'].strip() if query: form = SearchForm({'query' : query}) bookmarks = \ Bookmark.objects.filter (title__icontains=query)[:10] variables = RequestContext(request, { 'form': form, 'bookmarks': bookmarks, 'show_results': show_results, 'show_tags': True, 'show_user': True }) return render_to_response('search.html', variables)
这里使用GET方法而不是POST方法提交表单，因为这里我们只是简单的查询数据，而不是创建或者删除数据。
使用filter方法获取结果，它相当于SQL中的SELECT语句，filter方法中的参数格式如下：
field__operator
注意field与operator中为双下划线，field是我们指我们要根据这个字段进行查询，operator是指查询的方法。下面是常见的使用方法：
- exact 完全相当
- contains 包含参数值
- startswith 以参数值开头
- lt 比参数值小
- gt 比参数值大
除此之外，还有不区分大小写的iexact，icontains以及istartswith。
接下来在templates中创建search.html：
{% extends "base.html" %} {% block title %}Search Bookmarks{% endblock %} {% block head %}Search Bookmarks{% endblock %} {% block content %} <form id="search-form" method="get" action="."> {{ form.as_p }} <input type="submit" value="search" /> </form> <div id="search-results"> {% if show_results %} {% include 'bookmark_list.html' %} {% endif %} </div> {% endblock %}
在urls.py中添加url：
urlpatterns = patterns('', # Browsing (r'^$', main_page), (r'^user/(\w+)/$', user_page), (r'^tag/([^\s]+)/$', tag_page), (r'^tag/$', tag_cloud_page), (r'^search/$', search_page), )
在templates/base.html中添加如下代码，给导航菜单添加搜索链接：
<div id="nav"> <a href="/">home</a> | {% if user.is_authenticated %} <a href="/save/">submit</a> | <a href="/search/">search</a> | <a href="/user/{{ user.username }}/"> {{ user.username }}</a> | <a href="/logout/">logout</a> {% else %} <a href="/login/">login</a> | <a href="/register/">register</a> {% endif %} </div>
现在我们就拥有了搜索功能页面，接下来实现ajax获取数据，而不是通过重新加载页面。
实现实时搜索
为了实现实时搜索，需要做以下两件事：
- 通过submit()方法拦截表单的默认提交方法，然后自定义处理表单的方法。
- 使用Ajax在后台获取查询结果，然后插入页面中，这可以通过load()方法实现。
jQuery提供了load（）方法，可以从服务器加载指定页面，然后插入到指定元素中。它使用远端的页面URL作为参数。
首先，我们对视图函数进行编辑，当request.GET字典中中包含ajax的键时，就返回bookmark_list.html。编辑bookmarks/views.py，修改search_page方法：
def search_page(request): [...] variables = RequestContext(request, { 'form': form, 'bookmarks': bookmarks, 'show_results': show_results, 'show_tags': True, 'show_user': True }) if request.GET.has_key('ajax'): return render_to_response('bookmark_list.html', variables) else: return render_to_response('search.html', variables)
接下来，在static目录中创建search.js：
function search_submit() { var query = $("#id_query").val(); $("#search-results").load( "/search/?ajax&query=" + encodeURIComponent(query) ); return false; }
返回false的作用是告诉浏览器在调用load方法之后，不再自动提交表单。
然后在templates/search.html中添加如下链接：
{% extends "base.html" %} {% block external %} <script type="text/javascript" src="/site_media/search.js"> </script> {% endblock %} {% block title %}Search Bookmarks{% endblock %} {% block head %}Search Bookmarks{% endblock %} [...]
最后在给search.js添加如下代码：
$(document).ready(function () { $("#search-form").submit(search_submit); });
这样就给表单添加了submit事件，这样就可以使用ajax提交表单了。
实时编辑bookmarks
编辑已经提交的内容在很多网站中都是很常见的任务，它通常通过在内容旁边提供一个编辑链接来实现，如果点击，这个链接就引导用户到一个可以编辑内容的页面，当用户提交表单之后，就重定向至内容页面。
其实还有另外一种办法，不需要重定向至编辑页面，在当前页面就可编辑内容，所有的操作都发生在同一个页面，编辑表单与提交都是通过ajax实现的。
上面的技术称之为实时编辑。
实现编辑bookmarks功能
回忆一下， 在bookmarks/views.py中，我们是这样实现bookmark_save_page视图函数的，如果用户尝试保存同一个URL，则bookmark只会进行更新，而不是再创建一个。
实现编辑bookmarks功能还需要做以下两件事：
- 将bookmark的url通过get方法传递给bookmark_save_page视图
- 当bookmark_save_page接收到url参数时，就生成相应的编辑表单。
在实现上面的代码之前，我们先来对bookmark_save_page进行简化，将保存bookmark的部分放置在另外一个函数中，这个函数名为_bookmark_save，函数前面的下划线告诉Python在导入views视图时，不导入这个函数。这个函数接收request与表单对象作为参数，编辑bookmarks/views.py，添加如下代码：
def _bookmark_save(request, form): # Create or get link. link, dummy = \ Link.objects.get_or_create(url=form.clean_data['url']) # Create or get bookmark. bookmark, created = Bookmark.objects.get_or_create( user=request.user, link=link ) # Update bookmark title. bookmark.title = form.cleaned_data['title'] # If the bookmark is being updated, clear old tag list. if not created: bookmark.tag_set.clear() # Create new tag list. tag_names = form.cleaned_data['tags'].split() for tag_name in tag_names: tag, dummy = Tag.objects.get_or_create(name=tag_name) bookmark.tag_set.add(tag) # Save bookmark to database and return it. bookmark.save() return bookmark
继续编辑views.py，修改bookmark_save_page:
@login_required def bookmark_save_page(request): if request.method == 'POST': form = BookmarkSaveForm(request.POST) if form.is_valid(): bookmark = _bookmark_save(request, form) return HttpResponseRedirect( '/user/%s/' % request.user.username ) else: form = BookmarkSaveForm() variables = RequestContext(request, { 'form': form }) return render_to_response('bookmark_save.html', variables)
现在，bookmark_save_page视图的逻辑如下：
if there is POST data: Validate and save bookmark. Redirect to user page. else: Create an empty form. Render page.
为了实现编辑功能，需要对这个逻辑进行如下修改：
if there is POST data: Validate and save bookmark. Redirect to user page. else if there is a URL in GET data: Create a form an populate it with the URL's bookmark. else: Create an empty form. Render page.
下面实现上述伪代码，编辑bookmark_save_page视图函数：
from django.core.exceptions import ObjectDoesNotExist @login_required def bookmark_save_page(request): if request.method == 'POST': form = BookmarkSaveForm(request.POST) if form.is_valid(): bookmark = _bookmark_save(request, form) return HttpResponseRedirect( '/user/%s/' % request.user.username ) elif request.GET.has_key('url'): url = request.GET['url'] title = '' tags = '' try: link = Link.objects.get(url=url) bookmark = Bookmark.objects.get( link=link, user=request.user ) title = bookmark.title tags = ' '.join( tag.name for tag in bookmark.tag_set.all() ) except ObjectDoesNotExist: pass form = BookmarkSaveForm({ 'url': url, 'title': title, 'tags': tags }) else: form = BookmarkSaveForm() variables = RequestContext(request, { 'form': form }) return render_to_response('bookmark_save.html', variables)
接着编辑templates/bookmark_list.html，插入以下代码：
{% if bookmarks %} <ul class="bookmarks"> {% for bookmark in bookmarks %} <li> <a href="{{ bookmark.link.url }}" class="title"> {{ bookmark.title|escape }}</a> {% if show_edit %} <a href="/save/?url={{ bookmark.link.url|urlencode }}" class="edit">[edit]</a> {% endif %} <br /> {% if show_tags %} Tags: {% if bookmark.tag_set.all %} <ul class="tags"> {% for tag in bookmark.tag_set.all %} <li><a href="/tag/{{ tag.name|urlencode }}/"> {{ tag.name|escape }}</a></li> {% endfor %} </ul> {% else %} None. {% endif %} <br /> [...]
编辑bookmarks/views.py，在user_page视图中给模板传递show_edit变量：
def user_page(request, username): user = get_object_or_404(User, username=username) bookmarks = user.bookmark_set.order_by('-id') variables = RequestContext(request, { 'bookmarks': bookmarks, 'username': username, 'show_tags': True, 'show_edit': username == request.user.username, }) return render_to_response('user_page.html', variables)
当用户查看自身用户视图时，username==request.user.username才返回True。
最后，将页面中edit链接的字体改小点，编辑static/style.css:
ul.bookmarks .edit { font-size: 70%; }
实现实时编辑功能
显示实时编辑还需要做以下操作：
- 拦截单击编辑链接引发的事件，使用ajax从服务器获取修改表单，然后将页面中的bookmark替换成编辑表单
- 拦截用户提交表单的事件，然后使用ajax提交更新后的bookmark到服务器。
首先创建templates/bookmark_save_form.html，将bookmark_save.html中的保存表单移动这个文件中。
<form id="save-form" method="post" action="/save/"> {{ form.as_p }}
{% csrf_token %} <input type="submit" value="save" /> </form>
注意这里我们给表单赋予了ID属性与action属性，这是为了让它能够在用户页面与bookmark提交页面都能正常工作。
接下来在bookmark_save.html中包含上面的html。
{% extends "base.html" %}
{% block title %}Save Bookmark{% endblock %}
{% block head %}Save Bookmark{% endblock %}
{% block content %}
{% include 'bookmark_save_form.html' %}
{% endblock %}
打开bookmarks/views.py，进行编辑：
from django.views.decorators.csrf import csrf_exempt @csrf_exempt def bookmark_save_page(request): ajax = request.GET.has_key('ajax') if request.method == 'POST': form = BookmarkSaveForm(request.POST) if form.is_valid(): bookmark = _bookmark_save(form) if ajax: variables = RequestContext(request, { 'bookmarks': [bookmark], 'show_edit': True, 'show_tags': True }) return render_to_response('bookmark_list.html', variables) else: return HttpResponseRedirect( '/user/%s/' % request.user.username ) else: if ajax: return HttpResponse('failure') elif request.GET.has_key('url'): url = request.GET['url'] title = '' tags = '' try: link = Link.objects.get(url=url) bookmark = Bookmark.objects.get(link=link, user=request.user) title = bookmark.title tags = ' '.join(tag.name for tag in bookmark.tag_set.all()) except: pass form = BookmarkSaveForm({ 'url': url, 'title': title, 'tags': tags }) else: form = BookmarkSaveForm() variables = RequestContext(request, { 'form': form }) if ajax: return render_to_response( 'bookmark_save_form.html', variables ) else: return render_to_response( 'bookmark_save.html', variables )
编辑templates/user_page.html:
{% extends "base.html" %} {% block external %} <script type="text/javascript" src="/static/bookmark_edit.js"> </script> {% endblock %} {% block title %}{{ username }}{% endblock %} {% block head %}Bookmarks for {{ username }}{% endblock %} {% block content %} {% include 'bookmark_list.html' %} {% endblock %}
创建bookmark_edit.js:
function bookmark_edit() { var item = $(this).parent(); var url = item.find(".title").attr("href"); item.load("/save/?ajax&url=" + escape(url), null, function () { $("#save-form").submit(bookmark_save); }); return false; } function bookmark_save() { var item = $(this).parent(); var data = { url: item.find("#id_url").val(), title: item.find("#id_title").val(), tags: item.find("#id_tags").val() }; $.ajax({ url:"/save/?ajax", type:"POST", data:data, success:function (result) { if (result != "failure") { item.before($("li", result).get(0)); item.remove(); $("ul.bookmarks .edit").click(bookmark_edit); } else { alert("Failed to validate bookmark before saving."); } } }) return false; } $(document).ready(function () { $("ul.bookmarks .edit").click(bookmark_edit); });
这样就实现了实时编辑的功能。