#Jquery #AJAX #JAVASCRIPT
지금까지는 javascript를 이용하여 함수를 생성하고
비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다.
이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다.
핵심 코드
$.ajax({
1. url : 자원 (XX.do, json, xml, jsp, html)
2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text
3. type : 어떤 방식으로 데이터를 가져오느냐? post, get
4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값
5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술
});
[ a21_jsonLoad.jsp ]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"
import="springWeb.z01_vo.*,java.util.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/a00_comm/com.css"/>
<script type="text/javascript" src="${path}/a00_comm/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("h3").click(function(){
$.ajax({
url : "a12_data.jsp",
dataType : "json",
success : function(data){
$("table").html("<tr><th>번호</th><th>이름</th><th>나이</th><th>사는곳</th></tr>");
var show = "";
$.each(data,function(index, item){
show += "<tr><td>"+(index+1)+"</td>";
show += "<td>"+item.name+"</td>";
show += "<td>"+item.age+"</td>";
show += "<td>"+item.loc+"</td></tr>";
});
$("table").append(show);
}
});
});
});
</script>
</head>
<body>
<center>
<h3>로드 json</h3>
<table>
</table>
</center>
</body>
</html>
[ a12_data.jsp ]
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
[
{"name":"안녕맨","age":"27","loc":"서울"},
{"name":"하이맨","age":"25","loc":"인천"},
{"name":"하이요","age":"26","loc":"경기"}
]
결과 창 입니다.
로드 json을 클릭하였을때, 아래의 json 데이터들이 ajax를 통하여 전달 된 모습입니다.
javascript로 하는것 보다는 jquery로 하는게 좀더 간편한것 같습니다.
728x90
반응형
'Front-end > JQuery' 카테고리의 다른 글
| [jQuery] e.preventDefault() 의미 (0) | 2022.03.03 |
|---|---|
| [jQuery]이벤트의 연결 및 처리 .on() .off() .one() (0) | 2021.12.23 |
| [jQuery] 제이쿼리 AJAX (0) | 2021.04.29 |
| [jQuery] vanilla JS -> JQuery 표현법 (0) | 2021.04.29 |
| [jQuery] 제이쿼리에서 아작스(AJAX) 사용 (0) | 2021.04.27 |
댓글