예제3
- 사용자가 '제출' 클릭
- 서버는 JSON 형식의 응답을 반환
- 클라이언트는 서버에서 반환된 데이터를 받아서 웹 페이지의 특정 부분 (#nickName, #ph_number, #address)을 업데이트
ajaxClient3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 제이쿼리 -->
<script>
$(function(){
$("#buttonSubmit").on('click',function(){
$.ajax({
url : "./ajaxServer3.jsp",
type : "post",
dataType: 'json',
success:function(data){
alert("성공");
$("#nickName").text(data.nickName);
$("#ph_number").text(data.ph_number);
$("#address").text(data.address);
},
error: function(err) {
alert("실패 원인 : " + err);
}
})
})
})
</script>
</head>
<body>
<input id = "buttonSubmit" type = "button" value = "제출">
<p id = "nickName"></p>
<p id = "ph_number"></p>
<p id = "address"></p>
</body>
</html>ajaxServer3.jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
{
"nickName": "홍길동",
"ph_number" : "010-1234-5678",
"address" : "신촌"
}
비동기적으로 수행되어 페이지를 새로 고침하지 않고도 데이터를 전송하고 받을 수 있습니다.
결과
비전공자의 개발일기