-
Python Ajax 예제(db 연동)Python Django 2022. 10. 23. 15:55
cmd에서 명령어 입력 후, 원래 있던 테이블을 가져와서 models.py에 붙여놓기 한다.
models.py
from django.db import models # Create your models here. class Sangdata(models.Model): code = models.IntegerField(primary_key=True) sang = models.CharField(max_length=20, blank=True, null=True) su = models.IntegerField(blank=True, null=True) dan = models.IntegerField(blank=True, null=True) class Meta: managed = False db_table = 'sangdata'urls.py
from django.contrib import admin from django.urls import path from myajax import views urlpatterns = [ path("admin/", admin.site.urls), path("", views.MainFunc), path("list", views.ListFunc), path("calldb1", views.ListDbFunc), path("calldb2", views.ListDbFunc), ]views.py
from django.shortcuts import render from myajax.models import Sangdata from django.http.response import HttpResponse import json # Create your views here. def MainFunc(request): return render(request, 'main.html') def ListFunc(request): return render(request, 'list.html') def ListDbFunc(request): sdata = Sangdata.objects.all() datas = [] for s in sdata: dic = {'code':s.code, 'sang':s.sang, 'su':s.su, 'dan':s.dan} datas.append(dic) print(datas) return HttpResponse(json.dumps(datas), content_type="application/json")처음 list.html 페이지로 이동하면 DB 데이터 값은 호출되지 않는 상황이므로 data를 return할 필요가 없다.
LIstDbFunc함수에서 DB 데이터 값을 불러와서 반복문을 돌려서 각각의 값들을 datas라는 list 타입에 넣는다.
그리고 이것을 json.dumps(datas) 함수로 string 타입으로 바꿔서 정보를 가지고 간다.
HttpResponse를 import해서 return HttpResponse(json.dumps(datas), content_type="application/json")시킨다.
main.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 메인<p/> 부서 직원 고객 <a href="/list">상품</a> </body> </html>list.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> let xhr; window.onload = function(){ // 자바스크립트 객체(XMLHttpRequest)를 사용한 ajax 기본 방식 document.querySelector("#btnOk1").onclick = function(){ xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState === XMLHttpRequest.DONE){ if(xhr.status === 200){ process1(); } } } url = "calldb1" xhr.open("GET", url, true); xhr.send(); } // fetch 방식 document.querySelector("#btnOk2").onclick = function(){ const url = "calldb2"; fetch(url).then(res => { if(res.status === 200){ return res.json() }else{ console.error(`HTTP 에러! status:$(res.status)`); } }) .then(jsonData => { process2(jsonData); }) .catch(err =>{ console.error(err); }); } } function process1(){ let parseData = JSON.parse(xhr.responseText); // alert(parseData); let str = "<table border='1'>" str += "<tr><th>코드</th><th>품명</th><th>수량</th><th>단가</th></tr>"; let count = 0; for(let i = 0; i < parseData.length; i++){ str += "<tr>"; str += "<td>" + parseData[i].code + "</td>"; str += "<td>" + parseData[i].sang + "</td>"; str += "<td>" + parseData[i].su + "</td>"; str += "<td>" + parseData[i].dan + "</td>"; str += "</tr>"; count++; } str += "</table>"; document.querySelector("#showData1").innerHTML = str; } function process2(jsonData){ let str = "<table border='1'>" str += "<tr><th>코드</th><th>품명</th><th>수량</th><th>단가</th></tr>"; let count = 0; for(let i = 0; i < jsonData.length; i++){ str += "<tr>"; str += "<td>" + jsonData[i].code + "</td>"; str += "<td>" + jsonData[i].sang + "</td>"; str += "<td>" + jsonData[i].su + "</td>"; str += "<td>" + jsonData[i].dan + "</td>"; str += "</tr>"; count++; } str += "</table>"; document.querySelector("#showData2").innerHTML = str; } </script> </head> <body> Ajax 연습 : 원격 DB 자료 보기<p/> <button id="btnOk1">상품자료 출력 1</button> <br> <div id="showData1"></div> <hr> <button id="btnOk2">상품자료 출력 2</button> <br> <div id="showData2"></div> </body> </html>XMLHttpRequest 객체를 사용한 기존 방식이 있고, 새로 나온 방식으로 fetch 방식이 있다.
XMLHttpRequest 객체의 경우 querySelector의 id값과 url 정도만 수정하고 실제로 호출하는 함수를 바꾸는 정도로 사용 가능하다.
처음 list.html 페이지 
버튼을 클릭하면 DB에 저장된 데이터들을 불러올 수 있다.
'Python Django' 카테고리의 다른 글
Python Django 18 - Python Ajax (0) 2022.10.23 예제(table 가져와서 join해서 결과 나타내기) (0) 2022.10.23 게시판 예제 - 댓글 (0) 2022.10.23 게시판 예제 (0) 2022.10.23 Python Django 17 - table이 존재하는 상황(table 가져오기) (0) 2022.10.23