django ajax json实例

来源:互联网 发布:火狐浏览器如何禁用js 编辑:程序博客网 时间:2024/06/03 17:10

1.
views.py
定义views视图函数,将数据存入字典。并用压缩为json格式,dumps,并return。

import jsondef get_comments(request, article_id):    article_obj = models.Article.objects.get(id=article_id)    article_comments = article_obj.comment_set.select_related()    comment_dict = {}    for i in article_comments:        print('comments_id', i.id)        print('article_id', i.article_id)        print('parent_comment_id', i.parent_comment_id)        print('comment_type', i.comment_type)        print('user_id', i.user_id)        print('user_name', i.user.name)        print('comment', i.comment)        print('date', type(i.date))        print('date', time.strftime("%Y-%m-%d %H:%M:%S", i.date.timetuple()))        comment_dict[i.id] = [i.comment_type, i.comment, time.strftime("%Y-%m-%d %H:%M:%S", i.date.timetuple()), i.article_id, i.user_id, i.user.name, i.parent_comment_id]    comment_json = json.dumps(comment_dict)    return HttpResponse(comment_json)

2.
article.html中编辑js jquery,接受json数据,并处理并添加到html中

<script>    function getComments() {    $.get("{% url 'get_comment' one_article.id %}", function(callback){        console.log(callback);        var obj = JSON.parse(callback);        console.log(this.comment_type);        for (var key in obj){            console.log(key);            console.log(obj[key])        }    }    function getCsrf() {        return $("input[name='csrfmiddlewaretoken']").val();    }    $(document).ready(function () {        $(".comment-box button").click(function () {            var comment_text = $('.comment-box textarea').val();            if (comment_text.trim().length < 5){                alert("评论不能少于5个字")            }else {                $.post(                    "{% url 'post_comment' %}",                    {                        'comment_type':1,                        article_id: "{{ one_article.id }}",                        parent_comment_id:null,                        'comment':comment_text.trim(),                        'csrfmiddlewaretoken':getCsrf()                    },                    function (callback) {                        console.log(callback);                        if (callback == 'post-comment-success'){                            alert('post-comment-success');                            getComments();                        }                    }                )            }        })    })</script>