![[pthon2.7+django1.2+sae]博客评论的异步提交](http://www.mshxw.com/aiimages/31/222133.png "[pthon2.7+django1.2+sae]博客评论的异步提交")
在开发博客系统或者是电商系统，总之，凡是带有回复、评论、回帖之类针对一个内容进行回复的功能的时候，现在几乎全部都是采用ajax异步提交，并且同步在正确的位置显示提交结果，而不是在提交之后重新刷新整个页面来显示提交之后的内容。
ajax由于google的使用，被广为推广。它在客户端使用javascript语言编写，使用XMLHttpRequest对象，实现和服务的数据交互，详细信息参看：AJAX - XMLHttpRequest 对象。
ajax提交或者获取数据，常用数据形式包括：
普通文本，自己定义规则，自己解析，无成熟类库，需要自己编写。
xml文本，使用xml解析器解析，有成熟类库。
json文本，流行的数据形式，以体积小、灵活而著称，有成熟类库。
ajax有几个好处：
防止页面刷新，因为提交的只是一部分内容，页面大部分内容没有发生改变，如果还是刷新进而重新获取全部的话，对于服务器和客户端都是一种负担。而且页面刷新还会产生其他问题，诸如重复提交之类的。
减轻服务器负担，可以为更多人提供服务。
也有一些缺点：
给编程和调试带来一些小麻烦，不够使用习惯了，还是有一些方法和窍门的。
由于是ajax，所以页面地址没有变化，所以如果想分享地址的话，难以实现。需要做额外的工作，例如把地址打印出来，让用户复制分享。
用户不容易知道自己的提交正在进行，因为页面没有刷新，用户可能会重新点击提交按钮。这也可以解决，提交过程给出明显提示，然后灰掉提交按钮，或者做一些防止重复提交的工作。
今天的例子是博客评论的异步提交，环境是python2.7+django1.2+SAE。
下面是后台的处理代码，view中的代码
@csrf_exempt
def comment_new(request,blog_id):
blog=get_object_or_404(Blog,pk=blog_id)
#str(request.raw_post_data)
if request.method=="POST" and request.is_ajax():
title=request.POST['comment_title']
name=request.POST['comment_author_name']
email=request.POST['comment_author_email']
url=request.POST['comment_author_url']
content=request.POST['comment_content']
comment=Comment(title=title,author_name=name,author_email=email,author_url=url,content=content);
comment.blog=blog
comment=comment.save()
_dict={}
_dict["title"]=title
_dict["author_name"]=name
_dict["author_email"]=email
_dict["author_url"]=url
_dict["content"]=content
_dict["created_at"]=unicode(datetime.datetime.now())
return HttpResponse(simplejson.JSonEncoder().encode(str(_dict)))
def obj2dict(obj):
"""
summary:
将object转换成dict类型
"""
memberlist = [m for m in dir(obj)]
_dict = {}
for m in memberlist:
if m[0] != "_" and not callable(m):
_dict[m] = getattr(obj,m)
return _dict
下面是前段页面的代码
{% if comments %}
Comments:
{% for comment in comments %}
{{ comment.author_name }} Said at {{ comment.created_at }}
Title:
{{ comment.title }}
Content:
{% autoescape off %}
{{ comment.content }}
{% endautoescape %}
{% endfor %}
{% else %}
you are the first comment man, please!
{% endif %}
New Comment:
在客户端用到了三个类库，分别是jquery-1.7.1.min.js，jquery.json-2.3.min.js和jquery.placeholder.min.js。
jquery是一个javascript类库，封装了javascript的很多操作，使用方便。
jquery.json是jquery的一个扩展，用来处理json文本和object之间的转换。
jquery.placeholder是jquery的一个扩展，用来实现在输入框没有内容的时候，添加一些提示信息。在输入框没有内容的时候，显示一些内容，提示你应该输入什么，输入的格式是什么。【placeholder是html5支持的一个属性，专门用来做提示的。】
datadata=data.replace(/'/gi,""");
datadata=data.replace(/u"/gi,""");
前段页面的上面这两句需要大家注意，第一句用正则表达式替换【单引号】为【双引号】，第二句替换【u+双引号】为【双引号】。这都是为了后面使用
$.parseJSON(data);
做准备的。因为python后台返回的json字符串，也就是data的值是下面的格式
{'title':u'blog1','author':u'andyshi'}
字符串中有单引号和u，这都需要替换，jquery解析的json必须是标准格式的，就是双引号，而且不能包含其他内容，所以我进行了替换，然后才可以使用jquery.json进行解析。
u是因为python后台返回的是unicode字符串的缘故。应该有办法解决，待我再研究一下，稍后补充上来。
补充：
之前ajax返回的数据还需要处理单引号和字母u的问题，现在修正一下。
首先将前端的ajax代码变更为
$.ajax({
url:"/blog/{{ blog.id }}/comment/new/",
type:"POST",
contentType:"application/json; charset=utf-8",
data:data,
success:function(data, textStatus, jqXHR){
var obj=$.parseJSON(data);
$("#blog_comments").append("
"+obj.author_name+" Said at "+obj.created_at+"
"+obj.title+"
"+obj.content+"
");
$("#comment_form")[0].reset();
},
error:function(jqXHR, textStatus, errorThrown){
alert(textStatus);
alert(errorThrown);
}
});
很明显，就是去掉了ajax参数dataType，返回的结果变成在服务端组织好的json字符串，然后用jquery.json解析成对象。顺便里面的两次替换就可以去掉了。
python后台的view代码变更为
@csrf_exempt
#@csrf_protect
def comment_new(request,blog_id):
blog=get_object_or_404(Blog,pk=blog_id)
#str(request.raw_post_data)
if request.method=="POST" and request.is_ajax():
title=request.POST['comment_title']
name=request.POST['comment_author_name']
email=request.POST['comment_author_email']
url=request.POST['comment_author_url']
content=request.POST['comment_content']
comment=Comment(title=title,author_name=name,author_email=email,author_url=url,content=content);
comment.blog=blog
comment=comment.save()
#return string
return HttpResponse("{"title":"%s","author_name":"%s","author_email":"%s","author_url":"%s","content":"%s","created_at":"%s"}"
% (title,name,email,url,content,unicode(datetime.datetime.now())))
直接返回我们自己构造的字符串，构造的时候就使用双引号拼接。这样就给前台省去了正则替换的操作。
©著作权归作者所有：来自51CTO博客作者virusswb的原创作品，如需转载，请注明出处，否则将追究法律责任
ajaxpostpythonPython
1
分享
收
