Django Web开发【6】使用Ajax增强用户体验-白红宇

Django Web开发【6】使用Ajax增强用户体验

阅读量：4365 次

发布时间：2019-06-07

本文共 11661 字，大约阅读时间需要 38 分钟。

　　Ajax及其优点

　　Ajax实际上就是指异步Javascript与XML，它包含以下技术：

HTML与CSS

Javascript

XMLHttpRequest

　　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。

　　Django Bookmarks | 　　{% block title %}{% endblock %}

　　在上面的html中添加如下代码（红色部分），以方便在以后的页面中引用自身创建的js文件。

　　Django Bookmarks | {% block title %}{% endblock %}　　
     　　　　{% block external %}{% endblock %}

　　关于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.as_p }}　　　　
      　　
     
　　
     
      　　　　{% if show_results %}　　　　　　{% include 'bookmark_list.html' %}　　　　{% endif %}　　
     
{% 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中添加如下代码，给导航菜单添加搜索链接：


     
      　　
      home |　　{% if user.is_authenticated %}　　　　
      submit |　　　　
      search |　　　　
      　　　　　　{
    { user.username }} |　　　　
      logout　　{% else %}　　　　
      login |　　　　
      register　　{% endif %}

　　现在我们就拥有了搜索功能页面，接下来实现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 %}　　{% 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_requireddef 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_requireddef 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 %}　　
     
      　　　　{% for bookmark in bookmarks %}　　　　　　
      　　　　　　　　　　　　{
    { bookmark.title|escape }}　　　　　　{% if show_edit %}　　　　　　　　[edit]　　　　　　{% endif %}　　　　　　
　　　　　　{% if show_tags %}　　　　　　　　Tags:　　　　　　　　{% if bookmark.tag_set.all %}　　　　　　　　　　
       
        　　　　　　　　　　　　{% for tag in bookmark.tag_set.all %}　　　　　　　　　　　　　　
        　　　　　　　　　　　　　　　　{
    { tag.name|escape }}
　　　　　　　　　　　　{% endfor %}　　　　　　　　　　
       
　　　　　　{% else %}　　　　　　　　None.　　　　　　{% endif %}　　　　　　
[...]

　　编辑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.as_p }} 　　{% csrf_token %}

　　注意这里我们给表单赋予了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_exemptdef 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 %}　　{% 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);});

　　这样就实现了实时编辑的功能。

转载于:https://www.cnblogs.com/fireflow/p/5155416.html

你可能感兴趣的文章

隐藏"站长统计"图标

查看>>

Oracle select 中case 的使用以及使用decode替换case

查看>>

创建一个dynamics 365 CRM online plugin (十二) - Asynchronous Plugins