Django 序列化 前端通过ajax来获取数据库中的数据

前端通过ajax来获取数据库中的数据

1、实现方式一(不用,只参考)

在后台通过获取数据并自己格式化成html数据全部发给前端

# views.py

def get_data(request):
    user_list = models.UserInfo.objects.all()
    return render(request, 'get_data.html', {'user_list':user_list})
# 获取数据的前端页面 index.html
<h1>用户列表</h1>
<table id='tb'></table>

<script src='/statics/jquery.js'></script>

<script>
  $(function{
    initData()
  });
  function initData(){
    $.ajax({
      url: '/get_data.html'
      type: 'GET',
      success: function(arg){
          $('#tb').append(arg);
        }
    })

  }
<script>
# get_data.html

{% for row in user_list %}
        <tr>
           <td>{{ row.id }}</td>
       <td>{{ row.username }}</td>
     </tr>
{% endfor %}

 2、实现方法二

在后台通过只获取数据发给前端,由前端生成相应的html来存放数据

# views.py
from django.core imports serializers  可将对象序列化为符串
def get_data(request):
  ret = {'status':True, 'data':None}
  try:   # 1
    user_list
= models.UserInfo.objects.all()  # 这时是个QuerySet,里边是一个一个对象,无法json.dumps()
    ret['data'] = serializers.serialize('json',user_list)  # 将QuerySet对象序列化为json格式的字符串

    # 2
    # user_list = models.UserInfo.objects.all().values('id','username') #
这时是个QuerySet,里边是一个一个字典
    # ret['data']= list(userlist)  # 用list将最外层的QuerySet转为列表,就可json.dumps()

    # 3
# user_list = models.UserInfo.objects.all().values_list('id','username') #这时是个QuerySet,里边是一个一个元组
  # ret['data']= list(userlist)  # 用list将最外层的QuerySet转为列表,就可json.dumps()
    except Exception as e:
    ret['data'] = False
return HttpResponse(json.dumps(ret))
# 获取数据的前端页面 index.html
<h1>用户列表</h1>
<table id='tb'></table>

<script src='/statics/jquery.js'></script>

<script>
  $(function{
    initData()
  });
  function initData(){
    $.ajax({
      url: '/get_data.html'
      type: 'GET',
      dataType:'JSON'       success: function(arg){           if(arg.status){
            // 此时arg.data是个字符串
            v = JSON.parse(arg.data) //再将json字符串转为json对象
            //通过for循环取里里面的数据生成html...
            }
        }     })   } <script>

 

posted @ 2018-09-18 23:39  四十不惑的编程之路  阅读(3789)  评论(0编辑  收藏  举报