如何在 Django 中使用 AJAX 显示 rest api?
Posted
技术标签:
【中文标题】如何在 Django 中使用 AJAX 显示 rest api?【英文标题】:How to display rest api using AJAX in Django? 【发布时间】:2021-12-27 06:39:44 【问题描述】:我希望能够使用下面的 REST API 并在单个 html 页面上显示数据。
这是来自我的Django project
中的数据库连接函数的 API(响应)。
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 class="container-fluid">
<h3>Test Output</h3>
<br></br>
<table class="table table-sm">
<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) 的新手。我已经尝试了几次,但我无法做到。
你能帮我回答这个问题吗?谢谢!
【问题讨论】:
【参考方案1】:我认为下面这行是谁造成了问题
var totalLength = data.length;
似乎字典没有属性长度作为带有字典的 api 响应,因此您需要将其作为字典而不是数组来处理 如果您尝试添加行
console.log(totalLength)
这将是 undifiend 值,因此不会发生循环
【讨论】:
哦,谢谢。你是对的,那条线导致了问题,因为我的回答是一本字典。当我检查console.log(totalLength)
时,它返回了 undefined !。我试图对字典进行切片,我可以在 HTML 页面上显示结果。真的很感激!
好,希望在***中将此标记为正确答案以上是关于如何在 Django 中使用 AJAX 显示 rest api?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 django 中显示来自 ajax 搜索结果的产品?
如何使用 Ajax 在 Django 中更新 modelForm