在开发博客系统或者是电商系统，总之，凡是带有回复、评论、回帖之类针对一个内容进行回复的功能的时候，现在几乎全部都是采用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
下面是前段页面的代码
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/site_static/js/tiny_mce_jquery/tiny_mce.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/site_static/js/textareas_simple.js"></script>
{% if comments %}
<p>
<h2>Comments:</h2>
<div id="blog_comments">
{% for comment in comments %}
<p>
<a href="{{ comment.author_url }}">{{ comment.author_name }}</a> Said at {{ comment.created_at }}
</p>
<p>
<h3>Title:</h3>
{{ comment.title }}
</p>
<p>
<h3>Content:</h3>
{% autoescape off %}
{{ comment.content }}
{% endautoescape %}
</p>
<hr>
{% endfor %}
</div>
</p>
{% else %}
<h2>you are the first comment man, please!</h2>
{% endif %}
<p>
<h2>New Comment:</h2>
<script type="text/javascript">
$(document).ready(function(){
$("#comment_form").submit(function(e){
var data=$('#comment_form').serialize();
$.ajax({
url:"/blog/{{ blog.id }}/comment/new/",
type:"POST",
contentType:"application/json; charset=utf-8",
dataType:"json",
data:data,
success:function(data, textStatus, jqXHR){
//alert(typeof(data));
datadata=data.replace(/'/gi,"\"");
datadata=data.replace(/u"/gi,"\"");
//alert(data);
var obj=$.parseJSON(data);
//alert(obj.content);
$("#blog_comments").append("<p><a href=\""+obj.author_url+"\">"+obj.author_name+"</a> Said at "+obj.created_at+"</p><p>"+obj.title+"</p><p>"+obj.content+"</p><hr>");
$("#comment_form")[0].reset();
},
error:function(jqXHR, textStatus, errorThrown){
alert(textStatus);
alert(errorThrown);
}
});
return false;
});
});
</script>
<form method="post" action="" id="comment_form">
{% csrf_token %}
{% comment %}
{% for field in comment_form %}
<p>
{{ field.errors }}
{{ field.label_tag }}:{{ field }}
</p>
{% endfor %}
{% endcomment %}
<p>
<label for="comment_title">{{ comment_form.title.label }}</label>:
<input type="text" id="comment_title" name="comment_title" placeholder="Title"/>
{{ comment_form.title.help_text }}
</p>
<p>
<label for="comment_author_name">{{ comment_form.author_name.label }}</label>:
<input type="text" id="comment_author_name" name="comment_author_name" placeholder="author name"/>
{{ comment_form.author_name.help_text }}
</p>
<p>
<label for="comment_author_email">{{ comment_form.author_email.label }}</label>:
<input type="text" id="comment_author_email" name="comment_author_email" placeholder="author email"/>
{{ comment_form.author_email.help_text }}
</p>
<p>
<label for="comment_author_url">{{ comment_form.author_url.label }}</label>:
<input type="text" id="comment_author_url" name="comment_author_url" placeholder="author url"/>
{{ comment_form.author_url.help_text }}
</p>
<p>
<label for="comment_content">{{ comment_form.content.label }}</label>:
<textarea rows="10" cols="50" placeholder="content" id="comment_content" name="comment_content"></textarea>
{{ comment_form.content.help_text }}
</p>
<input type="submit" value="Save" />
</form>
</p>
在客户端用到了三个类库，分别是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("<p><a href=\""+obj.author_url+"\">"+obj.author_name+"</a> Said at "+obj.created_at+"</p><p>"+obj.title+"</p><p>"+obj.content+"</p><hr>");
$("#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
分享
收
共同学习，写下你的评论
评论加载中...
作者其他优质文章
