django 后端JsonResponse返回json數據給前端完美接收並將數據寫入前端頁面做展示


1.后端代碼編寫

from django.http import JsonResponse

res = {"code": 0, "message": result_list}
return JsonResponse(res)

2.前端代碼編寫

<h4 style="margin: 10px;color: blue;font-weight: bold">命令執行結果:</h4>
<ul id="list">
</ul>

3.ajax代碼編寫

$.ajax({
    url: url,
    type: "POST",
    traditional:true,  //加上此項可以傳數組
    data: {
        "cmd": cmd,
        "host_ip_list": host_ip_list,
        "host_port": host_port,
        "auth_type": auth_type,
        "login_user": login_user,
        "password": password,
    },
    success: function (data) {
        $("#list").html('');
        console.log(data.message);
        var message_list = data.message;
        for (let i = 0; i < message_list.length; i++) {
            console.log(message_list[i]);
            var server_ip = message_list[i].server_ip;
            var status = message_list[i].status;
            var result = message_list[i].result;
            $("#list").html($("#list").html() + "<br>" + " server_ip: " + server_ip + "<br/>");
            $("#list").html($("#list").html() + "<br>" + " status: " + status + "<br/>");
            $("#list").html($("#list").html() + "<br>" + " result: " + result + "<br/>");
            $("#list").html($("#list").html() + "<HR>" + "<br/>");
        };
    }
});

4.頁面顯示

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM