Django中templates用Ajax接收json資料用html展示

阿新 • • 發佈：2021-01-18

我這裡用Ajax接收資料展示

views

def index(request):
    if request.method =='POST':
        deploy = DeployInfoHelper(admin_ip, admin_port, admin_dbname, admin_dbuser, admin_dbpassword)
        json_info = deploy.get_deploy_info()
        return HttpResponse(json.dumps(json_info), content_type= 
"application/json")
    return render(request,'deploy_info.html')

注意
HttpResponse與JsonResponse都是django中後臺給前臺返回資料的方法，
並且他們最後走的都是http協議
不同的方法還是有點區別的，我們後臺給前臺返回資料的時候需要通過json格式的字串進行傳輸，因為前後臺都有對json格式字串進行操作的方式
他們的區別就是HttpResponse需要我們自己前後臺進行序列化與反序列化
而JsonResponse則把序列化和反序列化封裝了起來，我們直接傳入可序列化的字串，在前臺就能收到對應的資料

return JsonResponse(json_info,safe=False)

這裡需要加一個False，不然有問題

template

<body>
<dev id="table"></dev>
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $.ajax({
            url:"/",
            type: 
"POST",
            dataType: "json",
            success:function (ret) {
                console.log(ret)
                let htm = "";
                htm += "<table class=\"deploy_info\" border=\"1px\" width=\"100%\">\n" +
                    "<tr>\n" +
                    "\t<td id=\"deploy_id\">id</td>\n" +
                    "\t<td id=\"deploy_date\">上線日期</td>\n" +
                    "\t<td id=\"deploy_real_date\">上線實際日期</td>\n" +
                    "\t<td id=\"deploy_project\">上線專案</td>\n" +
                    "\t<td id=\"deploy_project_detail\">上線專案詳細內容</td>\n" +
                    "\t<td id=\"deploy_version\">上線版本</td>\n" +
                    "\t<td id=\"deploy_result\">上線結果</td>\n" +
                    "\t<td id=\"deploy_dev\">開發人員</td>\n" +
                    "\t<td id=\"deploy_test\">測試人員</td>\n" +
                    "\t<td id=\"deploy_ops\">運維人員</td>\n" +
                    "    <td id=\"deploy_remark\">備註</td>";
                for (let i = 0; i < ret.length; i++) {
                    htm += '<tr><td>'+ret[i]['id']+'</td>'
                        + '<td>'+ret[i]['deploy_date']+'</td>'
                        + '<td>'+ret[i]['deploy_real_date']+'</td>'
                        + '<td>'+ret[i]['deploy_project']+'</td>'
                        + '<td>'+ret[i]['deploy_project_detail']+'</td>'
                        + '<td>'+ret[i]['deploy_version']+'</td>'
                        + '<td>'+ret[i]['deploy_result']+'</td>'
                        + '<td>'+ret[i]['deploy_dev']+'</td>'
                        + '<td>'+ret[i]['deploy_test']+'</td>'
                        + '<td>'+ret[i]['deploy_ops']+'</td>'
                        + '<td>'+ret[i]['remarks']+'</td>';
                }
                htm += '</tr></table>';
                $('#table').append(htm)
            }
        })
    </script>
</body>

大概解釋一下Ajax前面一樣的,就是ret這個是從後端返回的json資料,寫到console.log,我們可以在瀏覽器裡看從後端是否接收過來
然後就是自己拼html表格了.這個就考驗html,css,jquery這些了,這些前端技能，我的水平很LOW
網上有那些可以幫你生成表格模板的網站
最後給一個完成的樣子

在這裡插入圖片描述

Django中templates用Ajax接收json資料用html展示

Django中templates用Ajax接收json資料用html展示

Django中資料傳輸編碼格式、ajax傳送json資料、ajax傳送檔案、django序列化元件、ajax結合sweetalert做二次彈窗、批量增加資料

controller接收json資料_SpringMVC實現多種資料型別繫結

django中通過form表單提交資料

vue input中展示JSON資料時格式化展示

ajax 傳送json資料時為什麼需要設定contentType: "application/json” 傳送的json物件必須要使用JSON.stringify進行序列化成字串才能和設定的這個型別匹配

Node-RED中怎樣讓網站返回JSON資料

根據json資料和HTML模板,渲染巢狀的HTML

Django中使用Json返回資料的實現方法

使用 Django 專案中的 ORM 編寫偽造測試資料指令碼

用Python將mysql資料匯出成json的方法

Python查詢不限層級Json資料中某個key或者value的路徑方式

Django 返回json資料的實現示例

Django-xadmin後臺匯入json資料及後臺顯示資訊圖示和主題更改方式

淺談在django中使用redirect重定向資料傳輸的問題

django實現HttpResponse返回json資料為中文

Django中從mysql資料庫中獲取資料傳到echarts方式

使用fastjson中的JSONPath處理json資料的方法

Django中ORM找出內容不為空的資料例項

拿來即用：用C+JS結構來處理JSON資料

Django中templates用Ajax接收json資料用html展示

相關推薦