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);
});
这样就实现了实时编辑的功能。
最新文章
- 在spring框架中配置Quartz定时器发生错误: class org.springframework.scheduling.quartz.JobDetailBean has interface org.quartz.JobDetail as sup
- Android入门(十八)服务
- Linux系统软件
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
- Worm.Win32.DownLoader.ns病毒主进程新式输入法注入分析(IME Inject)
- OpenJudge计算概论-单词排序
- Jquery 格式化时间
- 创建eclipse新的workspace并设置workspace共享配置
- QTREE - Query on a tree
- CCF2014093字符串匹配(C语言版)
- Extjs 判断对象是非为null或者为空字符串
- 局部变量,全局变量初始值问题----C与指针练习题4.14.1
- Ansible修改自定义端口和登录用户
- python基础学习21----进程
- 攻防对抗中常用的windows命令(渗透测试和应急响应)
- asp.net 對象圖解
- ubuntu 访问 共享 windows文件夹
- 详细了解下PHP的curl函数及常用之处
- Sql Server中的DBCC命令详细介绍
- ylbtech-LanguageSamples-Porperties(属性)