이번 포스팅은 jquery를 활용하여 Ajax를 사용해보도록 하겠습니다.
jQuery란?
jQuery(제이쿼리)는 JavaScript를 이용한 간편한 웹 개발을 위한 라이브러리입니다. jQuery는 웹 페이지 상에서의 다양한 작업들을 간편하게 수행할 수 있도록 설계되었으며, 주로 DOM 조작, 이벤트 처리, 애니메이션, AJAX 등을 간소화하고 효율적으로 처리할 수 있도록 도와줍니다.
jQuery 탄생과정
jQuery는 2006년 미국의 존 레식(John Resig)이 뉴욕시 바캠프(Barcamp)에서 처음 소개한 ‘자바 스크립트 라이브러리’입니다. 코드가 브라우저의 영향을 받아 작동하지 못하는 문제를 해결하기 위해 개발되었는데요.
코드와의 호환성 문제를 많이 일으키는 브라우저들이 있습니다. 우리나라에서 많이 사용했던 IE(Internet Exploer)가 대표적인데요. IE에서는 버전이나 호환성의 문제로 코드가 제대로 작동하지 않을 때가 많았습니다. 이 문제를 해결하고자 ‘크로스 브라우징’ 기능을 가진 jQuery가 탄생했습니다. 크로스 브라우징이란 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 하는 기능으로 코드가 브라우저에 따라 제대로 작동하지 않는 문제를 해결할 수 있습니다.
jQuery의 특징
1. jQuery는 DOM 조작을 쉽게 만들어줍니다. 웹 페이지의 요소를 선택하고 조작하는 작업이 간단해지며, HTML 문서의 요소를 쉽게 찾아 변경하거나 조작할 수 있습니다.
2. 크로스 브라우징 지원을 통해 다양한 웹 브라우저에서 일관된 동작을 보장합니다. 이것은 웹 개발자들에게 큰 편의성을 제공합니다.
3. 이벤트 처리 또한 jQuery를 사용하면 간단해집니다. 클릭, 호버 등 다양한 이벤트를 처리하고 관리하는 것이 용이하며, 코드를 간결하게 유지할 수 있습니다.
4. jQuery는 애니메이션과 시각적 효과를 추가하는 데 매우 편리합니다. fadeIn(), fadeOut(), slideUp() 등의 메서드를 사용하여 요소를 부드럽게 나타내거나 사라지게 할 수 있습니다.
5. 데이터 교환에도 탁월한 기능을 제공합니다. AJAX를 통해 비동기적으로 서버와 데이터를 교환할 수 있어서 페이지를 다시 로드하지 않고도 정보를 업데이트할 수 있습니다.
6. jQuery는 또한 다양한 플러그인을 활용하여 웹 개발에 필요한 추가 기능을 손쉽게 확장할 수 있습니다. 이로써 유연성과 확장성을 높여주며, 개발 작업을 빠르고 효율적으로 진행할 수 있습니다.
그러나 최근에는 최신 JavaScript와 브라우저의 발전으로 인해 jQuery에 의존하지 않고도 많은 작업을 순수 JavaScript로 처리할 수 있는 경우가 많아지고 있습니다. 이러한 변화에 따라 jQuery를 사용하는 것이 아닌 네이티브 JavaScript로도 많은 작업을 수행할 수 있게 되었습니다.
jquery를 활용하여 만든 ajax 코드 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
// "결과 보기" 버튼이 클릭되었을 때 실행되는 함수
$("#btnOk").click(function () {
// 입력된 직급 값을 가져오기
let name = $("#txtName").val();
// 결과를 표시하는 div를 비우기
$("#showData").empty();
// Ajax 요청
$.ajax({
url: 'list', // 서버의 URL
type: 'get', // HTTP 요청 방식
data: {'name': name}, // 서버에 전달할 데이터
success: function (data) { // 성공적으로 응답받았을 때 실행되는 콜백 함수
// 서버로부터 받은 데이터(data)를 처리
if(data == ''){
$("#showData").append("해당 자료가 없습니다.")
}else{
let str = "<table border='1'>";
let count=0;
str+="<tr><th>직원번호</th><th>직원명</th><th>부서명</th></tr>";
// 서버에서 받은 데이터를 반복하여 테이블에 추가
$.each(data,function(ind,entry){
str+="<tr>";
str+="<td>"+entry['jikwon_no']+"</td>";
str+="<td>"+entry['jikwon_name']+"</td>";
str+="<td>"+entry['buser_name']+"</td>";
str+="<tr>";
count+=1;
});
str+="</table>";
// 테이블과 건수를 화면에 추가
$("#showData").append(str);
$("#showData").append("건수 : "+count);
}
}, error: function () { // Ajax 요청이 실패했을 때 실행되는 콜백 함수
$("#showData").text("에러");
}
});
});
});
</script>
</head>
<body>
<!-- 웹 페이지의 내용 -->
ajax 연습문제1<br>
직원정보 입력 - 직급 :
<input type="text" name="name" id="txtName">
<input type="button" id="btnOk" value="결과 보기">
<br />
<div id="showData"></div> <!-- 결과를 표시할 div -->
</body>
</html>
let name = $("#txtName").val();은 HTML의 텍스트 상자(#txtName)에 입력된 값을 가져와서 변수 name에 할당합니다.
그리고 이 name 변수의 값이 Ajax 요청의 파라미터로 사용되어 서버로 전달됩니다.
즉, "결과 보기" 버튼을 클릭하면 해당 입력 필드에 입력된 값이 서버로 전달되어 직급(name)에 해당하는 데이터를 조회하고, 그 결과를 화면에 표시하기 위해 서버와 통신하는 것입니다.
from django.shortcuts import render
from pro18app.models import Jikwon
from django.http.response import HttpResponse
import json
def Main(request):
# 'show.html' 템플릿을 렌더링하여 반환
return render(request, 'show.html')
def List(request):
# 클라이언트에서 'name' 파라미터 값을 받아옴
name = request.GET['name']
print(name)
# 'Jikwon' 모델에서 'jikwon_jik' 필드가 'name'과 일치하는 데이터를 가져옴
jdata = Jikwon.objects.select_related('buser_num').filter(jikwon_jik=name)
print(jdata)
datas = []
# 쿼리셋 jdata를 JSON 형식으로 변환하여 클라이언트에 전송하기 위해 dict로 변환
for j in jdata:
# 각 데이터를 딕셔너리로 만들어 datas 리스트에 추가
dicData = {'jikwon_no': j.jikwon_no, 'jikwon_name': j.jikwon_name, 'buser_name': j.buser_num.buser_name}
datas.append(dicData)
# JSON 형식의 데이터를 클라이언트에 반환
return HttpResponse(json.dumps(datas), content_type='application/json')
받아온 name에 따라 crud로 필터링을 거친 데이터를 클라이언트에 전송하기 위해서는 JSON 형식으로 변환해야 합니다.
따라서 반복문을 사용하여 각각의 jdata 요소를 딕셔너리로 만들어서 datas 리스트에 추가하는 과정을 거칩니다.
각각의 요소는 'jikwon_no', 'jikwon_name', 'buser_name' 키를 가진 딕셔너리 형태로 구성됩니다. 이렇게 구성된 딕셔너리들이 datas 리스트에 순차적으로 추가되어 JSON 형식으로 변환될 준비를 합니다.
이렇게 변환된 datas 리스트는 json.dumps() 함수를 사용하여 JSON 형식의 문자열로 변환되고, 이후 HttpResponse 객체를 통해 클라이언트에 전달됩니다. 이를 통해 서버에서 클라이언트로 데이터를 전송할 수 있게 됩니다.
