urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path("admin/", admin.site.urls),
path('', views.indexFunc),
path('startajax', views.Func1),
path('goajax', views.Func2),
]
views.py
from django.shortcuts import render
import time
import json
from django.http.response import HttpResponseRedirect, HttpResponse
# Create your views here.
lan = {
'id':123,
'name':'파이썬',
'history':[
{'date':'2022-9-20', 'exam':'basic'},
{'date':'2022-10-20', 'exam':'django'},
]
}
def testFunc():
print(type(lan)) # <class 'dict'>
# JSON 인코딩 : Python Object(dict, list, tuple...)를 JSON 문자열로 변경
# indent=4 는 가독성을 높인다
# jsonString = json.dumps(lan)
jsonString = json.dumps(lan, indent=4)
print(jsonString)
print(type(jsonString)) # <class 'str'>
# JSON 디코딩 : JSON 문자열을 Python Object(dict, list, tuple...)로 변경
dic = json.loads(jsonString)
print(type(dic))
print(dic)
print(dic['name'])
def indexFunc(request):
testFunc()
return render(request, 'abc.html')
def Func1(request):
msg = request.GET.get('msg')
msg = "nice " + msg
print(msg)
context = {'key':msg}
time.sleep(10);
return HttpResponse(json.dumps(context), content_type="application/json")
def Func2(request):
datas = [
{'irum':'홍길동','nai':22},
{'irum':'고길동','nai':32},
{'irum':'신길동','nai':42}
]
return HttpResponse(json.dumps(datas), content_type="application/json")
abc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
let xhr;
window.onload = function(){
document.querySelector("#btn1").addEventListener("click", ()=>{
// alert('a');
// XMLHttpRequest 객체로 웹서버와 통신
xhr = new XMLHttpRequest();
// console.log(xhr);
xhr.onreadystatechange = function(){
// alert(xhr.readyState); // 0 ~ 4 값을 갖는다.
// 통신 상태가 이상이 없다는 뜻
if (xhr.readyState === XMLHttpRequest.DONE){
// alert(xhr.status);
if(xhr.status === 200){
// console.log(xhr.response);
process1();
}
}
}
url = "startajax?msg=" + document.querySelector("#txtMsg").value;
xhr.open("GET", url, true); // true 비동기 false 동기
xhr.send();
});
document.querySelector("#btn2").onclick = function(){
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState === XMLHttpRequest.DONE){
if(xhr.status === 200){
process2();
}
}
}
xhr.open("GET", "goajax", true);
xhr.send();
}
}
function process1(){
// alert(xhr.responseText)
let parseData = JSON.parse(xhr.responseText)
document.querySelector("#showData1").innerText = xhr.responseText;
}
function process2(){
// alert(xhr.responseText);
let parseData2 = JSON.parse(xhr.responseText)
let str = "";
for(let i=0; i < parseData2.length; i++){
str += parseData2[i].irum + " " + parseData2[i].nai + "<br>";
}
document.querySelector("#showData2").innerHTML = str;
}
</script>
</head>
<body>
Ajax 연습<p/>
<textarea cols="50" rows="5"></textarea>
<br>
자료 입력 : <input type="text" id="txtMsg" value="korea"/>
<button id = "btn1">Ajax test1</button>
<br>
<div id = "showData1"></div>
<hr>
<button id="btn2">Ajax test2</button>
<div id = "showData2"></div>
</body>
</html>'Django' 카테고리의 다른 글
| django11 - ajax, db (0) | 2022.10.20 |
|---|---|
| 고객 정보 찾기 예제 (0) | 2022.10.19 |
| django9 - DB, 게시판, 댓글 (0) | 2022.10.19 |
| django project 과정 정리 (0) | 2022.10.18 |
| django8 - DB, 표, CRUD, 페이징 (0) | 2022.10.18 |
