73일차 시작....

📌 Django JSON 인코딩, 디코딩

• Django에서 JSON 인코딩
  - json.dumps(딕셔너리)
  
  
• Django에서 JSON 디코딩
  - json.loads(JSON 데이터)
  
  
• Javascript에서 JSON parsing
  - JSON.parse(XMLHttpRequest객체.responseText)

📌 Django XMLHttpRequest로 Ajax 처리

• Ajax 처리
  1. 각 버튼에 addEventListener 처리
  2. new XMLHttpRequest() 객체 생성자 호출
  3. xhr.onreadystatechange = function() {} 이벤트 처리
  4. 함수 내부에 xhr.readyState === XMLHttpRequest.DONE 일 때 정상
  5. 이후 xhr.status === 200 일 때 정상
  6. JSON.parse(xhr.response) 로 응답을 JSON 문자열로 파싱 시킨다.
  7. 이벤트 밖에서 xhr.open("요청방식", "url", 비동기 여부)
  8. xhr.send()로 ajax 요청을 서버로 전달

document.querySelector("#btn1").addEventListener("click", function() {
	// XMLHttpRequest 객체로 웹서버와 통신
	let xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
		// 통신 상태가 잘 종료되면
		if(xhr.readyState === XMLHttpRequest.DONE) {
			if(xhr.status === 200) {
				let parseData = JSON.parse(xhr.responseText);
				document.querySelector("#showData1").innerText = parseData["key"];
			}
		}
	}

	url = "startajax?msg=" + document.querySelector("#txtMsg").value;
	xhr.open("GET", url, true)	// true: 비동기, false: 동기
	xhr.send();
});

📌 Django fetch로 Ajax 처리

• Ajax 처리
  1. 각 버튼에 EventListener 처리
  2. fetch(url) 수행
  3. .then((res) => {return res.json();} : JSON으로 받는 경우 json으로 파싱
  4. .then((data) => {data 처리....} : JSON parsing 데이터를 처리한다.

document.querySelectorAll(".ajaxA").forEach((button, idx) => {
	button.addEventListener('click', function() {
		// 페이지 번호 가져오기
		let page = this.value;
		url = "listAjax?page=" + page;

		// 최신 방식
		fetch(url)
		.then((res) => {
			if(res.status === 200) {
				return res.json();
			} else {
				console.log('HTTP err status')
			}
		})
		.then((data) => {
			console.log(data);
			document.querySelector("#test").innerHTML = data['data'];
		})
		.catch((err) => {
			console.log(err)
		});
	});
});

📌 Django Ajax 서버단 처리

• Ajax 서버단 처리
  1. 요청 방식(GET, POST, ....)에 따라 데이터를 적절하게 받는다.
  2. 데이터 처리 후, json.dumps(Object데이터) 메소드로 json으로 인코딩한다.
  3. HttpResponse() 함수를 이용해 인코딩된 json 데이터와 content_type을 준다.

def listDbFunc(req):    # listAjax
    datas = Sangdata.objects.all()
    paginator = Paginator(datas, 5)
    try:
        page = req.GET['page']
    except:
        page = 1

    try:
        datas = paginator.page(page)
    except PageNotAnInteger:
        datas = paginator.page(1)
    except EmptyPage:
        datas = paginator.page(paginator.num_pages)
    html_str = ""
    for data in datas:
        html_str += f'''
<tr>
    <td>{data.code}</td>
    <td>{data.sang}</td>
    <td>{data.su}</td>
    <td>{data.dan}</td>
</tr>
        '''
    print(html_str)
    result = {'data':html_str}
    return HttpResponse(json.dumps(result), content_type="application/json")