jQuery ajax 요청시 JSP 에서 JSON 포맷으로 응답하는 예
클라이언트측 코드 ( 응답 데이터 형식을 text 으로 설정한 경우이므로 parseJSon()을 이용해야 한다 )
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery ajax Request and json Response</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
type:"GET",
url:"book_json.jsp",
dataType:"text",
success:function(json){
var list = $.parseJSON(json);
var listLen = list.length;
var contentStr = "";
for(var i=0; i<listLen; i++){
contentStr += list[i].book.title+", "+ list[i].book.price +"</br>";
}
$("#before").append(json);
$("#after").append(contentStr);
}
})
});
});
</script>
</head>
<body>
<div id="before"></div>
<button>AJAX 요청-> JSON 응답</button>
<div id="after"></div>
</body>
</html>
서버측 JSP (book_json.jsp)
<%@ page language="java" contentType="text/plain; charset=utf-8"
pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%
String title = "홍길동전";
int price = 32;
%>
[
{"book":{"title":"Harry Porter", "price":"29.99"}},
{"book":{"title":"<%=title%>", "price":"<%=price%>"}},
{"book":{"title":"Learning XML", "price":"39.95"}}
]
jQuery AJAX 요청시 응답 데이터 형식을 json 으로 설정한 경우
응답을 수신하여 바로 json 객체로 사용할 수 있다.
응답 데이터의 형식을 json 으로 수신하기 위해 설정한 클라이언트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ajax request json</title>
<script src="jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
ajax_req();
});
});
function ajax_req()
{
var params = {"name":"홍길동", "password":"123abc"};
$.ajax({
type: "POST",
url: "get_json_info.jsp",
data: params,
dataType: "json",
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: function(jsonObj)
{
var name = jsonObj.name;
var phone = jsonObj.phone;
$('#div1').html(name+','+phone);
}
});
}
</script>
</head>
<body>
<button>Request</button>
<div id="div1"></div>
</body>
</html>
JSON 문자열을 응답으로 전송하는 서버측 코드(JSP)
<%@ page language="java" contentType="text/plain; charset=utf-8" pageEncoding="utf-8" trimDirectiveWhitespaces="true"%> <% String name = request.getParameter("name"); %> {"name":"<%=name%>", "phone":"010-9874-2516"}
JSP에서 JSON 배열을 클라이언트로 전송하고 클라이언트측에서 JSON 배열을 받아서 사용하는 예
JSON 포맷의 배열을 수신하고 사용하는 클라이언트측 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ajax request json</title>
<script src="jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
ajax_req();
});
});
function ajax_req()
{
var params = {"dept":"인사과"};
$.ajax({
type: "POST",
url: "get_json_info.jsp",
data: params,
dataType: "json",
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: function(jsonObj)
{
for(var i in jsonObj) {
var dept =jsonObj[i].dept;
var name = jsonObj[i].name;
var phone = jsonObj[i].phone;
$('#div1').append(dept+','+name+','+phone).append('<br>');
}
}
});
}
</script>
</head>
<body>
<button>Request</button>
<div id="div1"></div>
</body>
</html>
JSON 배열 포맷을 클라이언트측에 전송하는 서버측 코드 (JSP)
<%@ page language="java" contentType="text/plain; charset=utf-8" pageEncoding="utf-8" trimDirectiveWhitespaces="true"%> <% String dept = request.getParameter("dept"); %> [ {"dept":"<%=dept%>", "name":"홍길동", "phone":"010-9874-2516"}, {"dept":"<%=dept%>", "name":"김재동", "phone":"010-1293-8564"}, {"dept":"<%=dept%>", "name":"유인섭", "phone":"010-7359-4519"} ]