AJAX 통신
값을 서버에서 전송하는 경우
ajaxClient3
<%@ 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){
$("#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
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
{
"nickName": "타바스코",
"ph_number" : "0101111111",
"address" : "연남동"
}{ “받아올 아이디값” : “넘겨줄 값” } 이 들어가면 된다.
값을 배열로 서버에서 전송하는 경우
ajaxClient4
<%@ 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 : './ajaxServer4.jsp',
type : 'post',
dataType : 'json',
success : function(data) {
$.each(data, function(i, d) {
console.log(d.nickName);
console.log(d.ph_number);
console.log(d.adrress);
$("#info").before("<p>" + data[i].nickName + "</p>");
$("#info").before("<p>" + data[i].ph_number + "</p>");
$("#info").before("<p>" + data[i].address + "</p>");
});
},
error : function(err) {
alert("실패 원인 : " + err);
}
});
});
});
</script>
</head>
<body>
<input id="buttonSubmit" type="button" value="제출">
<p id="info"></p>
</body>
</html>each 문을 사용해 배열에서 값을 출력한다.
ajaxServer4
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
[
{
"nickName": "타바스코",
"ph_number" : "01011111111",
"address" : "서울"
},
{
"nickName": "마요네즈",
"ph_number" : "01033331111",
"address" : "부산"
}
]
ajax Gson 라이브러리 사용
데이터양이 많아졌을 때 효율적인 처리를 위한 라이브러리가 있다. → gson
데이터양이 적을 때는 직접 다 받아올 데이터를 써줄 수 있지만 양이 많으면 라이브러리로 데이터를 쉽게 받아올 수 있다.
서블릿을 이용해 Gson 사용해보기
앞으로 할 것 )
네이버의 API 를 이용해 검색창 구현
-블로그를 검색하는 기능
-서블릿 사용
네이버 블로그 검색 주소
https://openapi.naver.com/v1/search/blog?query=
이제 이걸 실행하는 화면을 만들 것이다.
질문)
@AllArgsConstructor의 역할
@AllArgsConstructor 어노테이션은 클래스의 모든 필드를 파라미터로 받는 생성자를 자동으로 생성해주는 역할을 합니다. 이를 통해 개발자는 일일이 생성자를 작성할 필요 없이, 코드의 간결함과 유지보수성을 높일 수 있습니다.
출처) 노션 AI
'2024_UIUX 국비 TIL' 카테고리의 다른 글
| UIUX _국비과정 0711 [페이스북 로그인] (0) | 2024.07.29 |
|---|---|
| UIUX _국비과정 0710 [오픈 API활용-카카오맵] (0) | 2024.07.25 |
| UIUX _국비과정 0708 [이메일 보내기] (0) | 2024.07.23 |
| UIUX _국비과정 주말공부(0708 모델 2 방식 게시판 수정까지) (2) | 2024.07.22 |
| UIUX _국비과정 0704 ~ 05(0708 모델 2 방식 게시판 수정까지) (1) | 2024.07.22 |