Django ajax定时器打印表格 json格式 Django从后台拿数据打印

超、凢脫俗 2022-10-22 07:42 13阅读 0赞

### 1.views.py ###

from django.http import HttpResponse,JsonResponse
    from django.shortcuts import render
    from django.template import loader,RequestContext
    
    
    def index(request):
        return render(request, 'index.html')
    
    
    def ajax_dict(request):
        name_dict = {"1":{'name':'jjh','age':'18'},"2":{'name':'ljz','age':'17'},"3":{'name':'tzq','age':'18'}}
        return JsonResponse(name_dict)

## ##

### 2.urls.py ###

from django.conf.urls import url
    from . import views
    
    urlpatterns = [
        url(r'^index/$', views.index),
        url(r'^dict/$', views.ajax_dict),
    ]

### 3.index.html ###

记得创建templates目录并配置setting.py

<!DOCTYPE html>
    <html>
    <body>
    
        <div id="my_table">
    
        </div>
    
    
     
     <br>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
          // 字典 dict
              $.getJSON('/dict/',function(ret){
                  console.log(ret);
                  $('#my_table').html("");  //清空内容
                  table="<table border='1' cellspacing='0'><tr><th>姓名</th><th>年龄</th></tr>"
                  //返回值 ret 在这里是一个字典
                  for ( var key in ret)
                   {
                        console.log(ret[key])
                        tmp=ret[key]
                        str_td="<td>"+ tmp["name"] + "</td>"
                        str_td2="<td>" + tmp["age"] + "</td>"
                        table+="<tr>"+str_td+str_td2+"</tr>"
                   }
                   table+="</table>"
                   $('#my_table').append(table)
              })
          });
    </script>
    </body>
    </html>

python manage.py runserver

URL: 127.0.0.1/index

![20210405111642588.png][]

### 4.动态ajax ###

使用setTimeout（）函数实现每隔5s刷新一次

<!DOCTYPE html>
    <html>
    <body>
    <p>请输入两个数字</p>
    <form action="/add/" method="get">
        a: <input type="text" id="a" name="a"> <br>
        b: <input type="text" id="b" name="b"> <br>
        <p>result: <span id='result'></span></p>
        <button type="button" id='sum'>提交</button>
    </form>
      <br>
    
    
    <div id="dict">Ajax 加载字典</div>
    <p id="dict_result"></p>
     
    <div id="list">Ajax 加载列表</div>
    <p id="list_result"></p>
    
    
        <div id="my_table">
    
        </div>
    
    
     
     <br>
    <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        window.onload = function () {
            getApi();
        }
    
             function getApi() {
              $.getJSON('/dict/',function(ret){
                  console.log(ret);
                  //每隔5s重新load一边dom树
                  setTimeout(getApi,5*1000);
    
                  $('#my_table').html("");  //清空内容
                  table="<table border='1' cellspacing='0'><tr><th>姓名</th><th>年龄</th></tr>"
                  //返回值 ret 在这里是一个字典
                  for ( var key in ret)
                   {
                        console.log(ret[key])
                        tmp=ret[key]
                        str_td="<td>"+ tmp["name"] + "</td>"
                        str_td2="<td>" + tmp["age"] + "</td>"
                        table+="<tr>"+str_td+str_td2+"</tr>"
                   }
                   table+="</table>"
                   $('#my_table').append(table)
              })
              }
    
    </script>
    </body>
    </html>

console.log 输出日志，更新后台数据后前台实时同步

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NrNzg0MTAxNzc3_size_16_color_FFFFFF_t_70][]

[20210405111642588.png]: /images/20221022/a46e508887904e05b86d5ee4137da719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NrNzg0MTAxNzc3_size_16_color_FFFFFF_t_70]: /images/20221022/fe01a462aed14affaf8118e427d9fac4.png