https://integer-ji.tistory.com/260
django QuerySet json으로 Response 하기
models.py from django.db import models from django.utils import timezone from django.contrib.auth.models import User class Report(models.Model): objects = models.Manager() input_user = models.Forei..
integer-ji.tistory.com
저번 게시글 부터 이어 갑니다.
기존에는 함수에 html을 호출하는 부분에 객체를 모두 넘겨 주었다면
이제는 객체를 받아오는 api와 html을 호출하는 api 따로 시작합니다.
views.py
apiTest라는 html을 열기 위해 함수와 url을 설정합니다.
apiTest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>apiTest</title>
</head>
<body>
<a>안녕하세요</a>
<table class="table">
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
</tr>
</thead>
<tbody id="apiTest">
</tbody>
</table>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "{% url 'getApi' %}",
dataType: "json",
success: function (data) {
var apiTest = "";
for (var i = 0; i < data.length; i++) {
apiTest += "<tr>"
apiTest += "<td>" + data[i].pk + "</td>"
apiTest += "<td>" + data[i].fields.input_lat + "</td>"
apiTest += "<td>" + data[i].fields.input_lon + "</td>"
apiTest += "<td>" + data[i].fields.input_user + "</td>"
apiTest += "</tr>"
}
$('[id="apiTest"]').html(apiTest);
},
error: function (request, status, error) {
console.log('실패');
}
});
</script>
</html>먼저 1 ~ 22 line입니다.
기존 html 영역이며
테이블을 가져옵니다.
tbody의 id값을 apiTest로 명시해 줍니다.
24 ~ 46 line
javascript영역 입니다.
ajax를 이용해 json타입의 api를 호출합니다.
호출 api url이름은 저번 게시글 에서 만든 json타입의 객체가 들어있는 api입니다.
이제 해당 api를 받아 for문으로 돌려줍니다.
먼저 로그를 찍어보면
$.ajax({
url: "{% url 'getApi' %}",
dataType: "json",
success: function (data) {
var apiTest = "";
for (var i = 0; i < data.length; i++) {
apiTest += "<tr>"
apiTest += "<td>" + data[i].pk + "</td>"
apiTest += "<td>" + data[i].fields.input_lat + "</td>"
apiTest += "<td>" + data[i].fields.input_lon + "</td>"
apiTest += "<td>" + data[i].fields.input_user + "</td>"
apiTest += "</tr>"
console.log(data[i]);
}
$('[id="apiTest"]').html(apiTest);
},
error: function (request, status, error) {
console.log('실패');
}
});console.log를 이용해 로그를 출력한 모습입니다.
해당 로그를 이용하여
for문을 돌려 html단에서 명시해준 apiTest라는 tbody에 html코드와 원하는 데이터의 값을 넣어줍니다.
그러면 모델에 들어있는 값을 ajax로 호출할 수 있습니다.
4번같은 경우 username인데.... user의 pk로 나오네요...
왜 ajax를 이용해 데이터를 호출하느냐?
https://likelion-kgu.tistory.com/41
[jquery이용] Django에서 AJAX 사용하기
1️⃣ What is AJAX? **Ajax(Asynchronous JavaScript and XML)**는 비동기적인 웹 제작을 위한 기법입니다. 2️⃣ Why we use this? 웹사이트 내의 특정 페이지의 데이터 변화가 존재할 때 페이지를 **새로고..
likelion-kgu.tistory.com
해당 게시글을 참고하였으며
정리 후 수정 예정
'코딩공부 > Python Django' 카테고리의 다른 글
| django secrets.json views.py에 불러오기 (0) | 2020.08.13 |
|---|---|
| kakao 지도 api를 활용한 for문 돌리기.. (0) | 2020.08.04 |
| heroku ModuleNotFoundError: No module named 'app.wsgi' (0) | 2020.07.31 |
| heroku Syntax is: git@heroku.com:<app>.git where <app> is your app's name. (0) | 2020.07.30 |
| heroku git@heroku.com: Permission denied (publickey). (0) | 2020.07.30 |