上次ajax成功在django中获得一个html页面并且替换部分页面之后,这次继续对其进行优化,
从后台返回一个json对象然后再对其在前端加入dom
首先我们需要引入json2.js实现json对象的序列化
然后存储在django的staticf文件夹中 以便对其引入
首先引入js
<script src="{% static "jquery/jquery.min.js" %}"></script>
其中button用到了bootstrap 圖標
前端代码
$('#comment_form form').submit(function(){
var name = $("#id_name").val();
var content = $("#id_comment").val();
$('#comment_form form #submit_btn').attr('disabled', 'disabled'); //表单提交时锁定提交按钮
$('#sub-change').attr('disabled','disabled');
$('#comment_form form #submit_btn').html(' <span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>提交中');//更改提交按键的状态
$.ajax({ //正常的ajax
type:"POST",
data: {name:name, content:content},
url: "{% url 'blog:showcomment' blog.id %}", //提交的url位置
cache: false,
dataType: "html",
success: function(result, statues, xml){
<span style="color:#ff0000;">var jsonObj = new Array();
jsonObj = JSON.parse(result); //对接受到服务器的result序列化,用到了上边提到的jsons.js
console.log(jsonObj);
$("form #id_comment").val("");
$("form #id_name").val("");
var replace_html = '<h1>'+ jsonObj.name +'<h1> <h2>'+ jsonObj.content +'</h2>'; //为了简单这里只替换了一小段html真正的可能比这个长许多
alert("评论提交成功");
$(".comment_container").append(replace_html);
},
error: function(){
alert("false");
}
});
上边代码注释中提到的提交到的url处的处理函数
import JsonResonse #引入JsongResponse django1.7以后的功能
def blog_show_comment(request, blog_id):
blog = Article.objects.get(pk=blog_id)
if request.method == 'POST':
name = request.POST['name']
content = request.POST['content']
data_returned = {"name": name, "content": content}
return JsonResponse(data_returned)
else:
return HttpResponse("test")
测试结果 如上边所说,为了简单,这里并没有加入过多的html 只是为了突出通信部分,所以看起来会有些诡异