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

dangrui0725 2021-09-01 原文

前端通过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>