django ajax通信之二

上次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 只是为了突出通信部分，所以看起来会有些诡异