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);
});

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

  

Django Web开发【6】使用Ajax增强用户体验的更多相关文章

  1. Web开发中设置快捷键来增强用户体验

    从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所 ...

  2. Django web 开发指南 no such table:

    在学习django web开发指南时,发布新博客点击save后会有error提示:no such table balabalabala... 百度了一下说重新运行manage.py syncdb 就可 ...

  3. Django Web开发学习笔记(1)

    一.Python的标准类型 (1)bool型 >>> bool("") False >>> bool(None) False >>& ...

  4. Django Web开发指南笔记

    Django Web开发指南笔记 语句VS表达式 python代码由表达式和语句组成,由解释器负责执行. 主要区别:表达式是一个值,它的结果一定是一个python对象:如:12,1+2,int('12 ...

  5. 基于gin的golang web开发:永远不要相信用户的输入

    作为后端开发者我们要记住一句话:"永远不要相信用户的输入",这里所说的用户可能是人,也可能是另一个应用程序."永远不要相信用户的输入"是安全编码的准则,也就是说 ...

  6. Django web开发【5】 实现标签功能

    标签tag在很多web2.0应用中都很常见,标签其实就是关联某些信息的一个关键字.打标签实际上就是给内容分配标签的过程,它通常由作者或者用户实现.标签之所有这么流行是因为它允许用户对自己创建的博客.图 ...

  7. Django Web开发【4】 用户注册与管理

    几乎所有的网站都提供了用户注册与管理功能,这一节,我们将讲解如何利用Django自身提供的用户认证系统实现用户注册与管理功能. 会话认证 在上一节中,我们学习了User数据模型,并用它来保存用户信息, ...

  8. [python] python django web 开发 —— 15分钟送到会用(只能送你到这了)

    1.安装python环境 1.1 安装python包管理器: wget https://bootstrap.pypa.io/get-pip.py sudo python get-pip.py   1. ...

  9. Android开发学习之路-提升用户体验小技巧

    记得之前看谷歌的一个视频提到这个用户体验的问题,今天想起来了就写了个Demo来记录下. 当一个事件发生之后,用户需要一段时间才能知道结果,那么这段时间究竟应该让用户干什么?这个问题很常见,比如我们的软 ...

随机推荐

  1. WdatePicker日历控件用法

    1. 跨无限级框架显示 不管你把日期控件放在哪里,你都不须要操心会被外层的iframe所遮挡进而影响客户体验,由于My97日期控件是能够跨无限级框架显示的 演示样例2-7 跨无限级框架演示 可无限跨越 ...

  2. javascript高级知识点——内置对象原型

    代码信息来自于http://ejohn.org/apps/learn/. 可以修改内置对象的方法. if (!Array.prototype.forEach) { Array.prototype.fo ...

  3. Android源码学习(一) 数据集观察者

    查看Android源码发现这个,决定记下下来. 1.在android.database这个包下面,存在这样一个抽象类DataSetObserver,里面包括onChanged()和onInvalida ...

  4. Java 基本日期类使用——格式化(二)

    Java日期格式化主要有以下几种方式:java.text.DateFormat以及其子类java.text.SimpleDateFormat; DateFormat 是日期/时间格式化子类的抽象类,它 ...

  5. Java并发编程实践(读书笔记) 任务执行(未完)

    任务的定义 大多数并发程序都是围绕任务进行管理的.任务就是抽象和离散的工作单元.   任务的执行策略 1.顺序的执行任务 这种策略的特点是一般只有按顺序处理到来的任务.一次只能处理一个任务,后来其它任 ...

  6. 进程间通信机制IPC

    进程通信是指进程之间的信息交换.PV操作是低级通信方式,例如信号量,主要是进程间以及同一进程内不同线程之间的同步手段.髙级通信方式是指以较高的效率传输大量数据的通信方式.高级通信方法主要有以下三个类. ...

  7. 网站linux.linuxidc.com有很多好资料

    免费下载地址在 http://linux.linuxidc.com/ 用户名与密码都是www.linuxidc.com 有一些介绍:www.linuxidc.com/download

  8. TCPL 行计数

    C programming language: P13 行计数 e.g. #include <stdio.h>int main(void){    int c, nb, nt, nl;   ...

  9. Codis集群的搭建

    Codis集群的搭建与使用   一.简介 Codis是一个分布式的Redis解决方案,对于上层的应用来说,连接Codis Proxy和连接原生的Redis Server没有明显的区别(不支持的命令列表 ...

  10. MySQL----cluster安装

    第一步.下载MySQL cluster: http://cdn.mysql.com/Downloads/MySQL-Cluster-7.4/mysql-cluster-gpl-7.4.7-linux- ...