一、最近简单的但不推荐

利用render渲染，后的页面，通过读取后的字符串返页面显示
1.首先用户访问时可以给用户一个大的页面框架
2.然后部分渲染到页面上

• 展示页面

def xilihua(reuquest):
    return  render(reuquest,"xuliehua.html")

• 实际处理的链接

def get_data(request):
     obj = models.UserInfo.objects.all()
    return render(request,"data.html",{'obj':obj})

• html

<table id="td">

</table>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    $(function () {
        initData();
    })
    {#序列化#}
    function initData() {
        $.ajax(
            {
                url:'/get_data/',
                type:'GET',
     
                success:function (arg) {
                    第一种序列化
                    $('#td').append(arg)
                    if(arg.status){
                        
                          $('#td').append(arg)
                    }
                }
            }
        )
    }
</script>

• 第二种推荐

rom django.core import serializers 引入可以对象做序列化
这里要注意 这个引入针对all

#第二种序列化
def get_data(request):
    from django.core import serializers
    ret = {'status':True,'data':None}
    try:
        #对象序列化
        #user_list = models.UserInfo.objects.all()
        #ret['data'] = serializers.serialize('json', user_list)

        #序列化values/在前端不用序列化两次
        user_list = models.UserInfo.objects.values("id","username")
        ret['data'] = list(user_list)
    except Exception as e:
        ret['status'] = False

    result = json.dumps(ret)
    return HttpResponse(result)

• html
  如果是 对象 要做两次序列化，因为data两次序列化所以在做一次

    f<table id="td">

</table>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    $(function () {
        initData();
    })
    {#序列化#}
    function initData() {
        $.ajax(
            {
                url:'/get_data/',
                type:'GET',
                //第二种序列化
                dataType:'JSON',
                success:function (arg) {
                  
                    if(arg.status){
                        //因为data两次序列化所以在做一次
                        var v = JSON.parse(arg.data);
                        console.log(v)

                    }
                }
            }
        )
    }
</script>