jQuery安装下载到本地或者直接引用:
<head> <script src="***/jquery.min.js" rel="nofollow"/></head>
<div id = "reply_form" style="background-color: #E8E8E8">
{% for dic_reply in reply_message %}
{% ifequal dic_reply.parent_id_id dic.id %}
<p> <b>回复人:</b>{{dic_reply.user_name}}
<b>时间:</b> {{dic_reply.time}} </p>
<p> <b>内容:</b>{{dic_reply.content}} </p>
{% endifequal %}
{% endfor %}
</div>
因为Django无法通过render_to_response方法局部加载html,如果django只是通过HttpResponse传递一个变量,jQuery无法局部加载和template变量也无法渲染template模板
后来想到两思路:
1. 后台直接构成一个完整html格式内容,传给前端直接替换。
2.后台只传变量到前端,通过js方法构成想要的html格式内容,再做替换。
其实两种方法区别就是一种在后台完成html内容构造,一种在前端构造。试验了很多次,没能成功,最后在高手指点下终于成功试出方法1。基本思路还是在后台先生成正确的html格式代码,在统一发到前端替换前端代码。
if request.is_ajax():
t = get_template('reply_form.html') //获取模板内容
content_html = t.render(Context({'reply_message':ReplyMessage_dic})) //渲染模板生成想要的局部html内容
payload = {
'content_html': content_html,
'success': True} //构造json类型数据,以方便前端处理
return HttpResponse(json.dumps(payload), mimetype="application/json") //用json类型返回数据到前端
这地方要注意的问题是渲染模板不能用render_to_response的方法,否则就直接返回到前端了。返回HttpResponse一定要加mimetype="application/json"参数,否则可能会出现前端页面无法通过json的方法获取到对应的值前端JS代码:
<script type="text/javascript">
$(document).ready(function() {
$('#reply_submit').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call; send the data to server
success:function(responseData) { // on success.. get respose from the server
$('#reply_form').html(responseData.content_html); // update the DIV with response
}
});
return false;
});
});
</script>
几点说明的:
1.responseData就是后台传过来的json类型数据,即我们构造的payload,有点python里面字典数据类型,实际上通过json.dump方法传递后已经是一个json数据类型。这样方便前端用json方法访问。而responseData.content_html就是我们要替换实际内容。个人对json的理解是Ajax用来前后台方便通信的一种数据类型,具体介绍可以上W3c去查阅。
2. 调式前端问题可以通过firebug,fiddler等工具调试(比较菜)。