예제2
- 사용자가 "제출" 버튼을 클릭
- nickName이라는 데이터를 서버로 전송
- 서버에서 반환된 데이터를 받아 웹 페이지의 특정 부분을 업데이트
- 실패시 원인을 알림으로 표시
ajaxClient2.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>
/* Ajax를 사용하여 서버와 비동기 통신을 하는 방식*/
$(function(){
$("#buttonSubmit").on('click',function(){
$.ajax({
url : "./ajaxServer2.jsp",
type : "post",
data : { nickName : '닉네임'},
dataType: 'json',
success:function(data){
alert("성공");
console.log(data.nickName);
$("#nickname").text(data.nickName);
},
error: function(err) {
alert("실패 원인 : " + err);
}
})
})
})
</script>
</head>
<body>
<input id = "buttonSubmit" type = "button" value = "제출">
<p id = "nickname"></p>
</body>
</html>ajaxServer2.jsp
<%@ page language="java" contentType="application/json; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String nickName = request.getParameter("nickName");
%>
{
"nickName": "<%= nickName %>"
}
결과
제출 클릭시, 닉네임 반환
비전공자의 개발일기