如何在Django中使用AJAX顯示restapi？-有解無憂

我希望能夠使用下面的 REST API 并在單個 HTML 頁面上顯示資料。

這是來自我的Django project.

URL: http://127.0.0.1:8000/api/v1/test/

API output:
{
    "message": "Success !",
    "server": "Connection established from ('PostgreSQL 12.7, compiled by Visual C   build 1914, 64-bit',)"
}

我嘗試使用 AJAX 顯示資料。但是，該資料不會出現在頁面上。這是我的嘗試：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>API Calls Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
    <div >
        <h3>Test Output</h3>
        <br></br>
        <table >
            <tr>
                <th>Output</th>
            </tr>
            <tbody id="divBody"></tbody>
        </table>
    </div>
</body>

<script>
    $(document).ready(function () {
            BindConnection();
        });

    function BindConnection(){
        $.ajax({
            type:"GET",
            dataType: "JSON",
            url: "http://127.0.0.1:8000/api/v1/test", 
            success: function(data){
                console.log(data);

                var str = "";
                var totalLength = data.length;
                
                for (let i=0; i < totalLength; i  ){
                    str  = "<tr>"  
                        "<td>"   data[i].server   "</td>"
                    "</tr>"
                }
                $("#divBody").append(str)
            }
        });
    }
</script>

注意：可以在控制臺顯示結果，沒有錯誤。

抱歉，我的嘗試很糟糕，因為我還是 Django、REST API 和 Javascript (AJAX) 的新手。我已經嘗試了幾次，但我做不到。

你能幫我回答這個問題嗎？謝謝！

如何在 Django 中使用 AJAX 顯示 rest api？

uj5u.com熱心網友回復：

我認為導致問題的以下行

var totalLength = data.length;

似乎字典沒有屬性長度作為帶有字典的 api 回應，因此如果您嘗試添加行，則需要將其作為字典而不是陣列來處理

console.log(totalLength)

它將是 undifiend 值，因此不會發生回圈

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/358733.html

標籤：javascript 查询姜戈阿贾克斯

上一篇：你如何定義$Ajax？[復制]

下一篇：在C 中傳遞一個容器型別作為模板的型別名