주먀

servlet 비동기통신 본문

학원/Servlet

servlet 비동기통신

주먀 2023. 5. 8. 15:41

★ 비동기 통신(ajax) --> JQuery 라이브러리 필요 / servlet 에서 html 코드를 간편하게 쓰기위해 JQuery 쓰자

 

★

$.ajax( {
            url : '', // 어디로?
            type : '', // Get?, Post?
            data : {}, // 보낼 데이터
            success : function(res){
               // 요청이 성공하면 실행될 콜백함수
            },
            error : function(e){
               // 요청이 실패하면 실행될 콜백함수
               alert("요청 실패!");
            }
         } );

 

 

1. webabb 파일 -> Ajax 파일명 jsp 만들기

2. body 태그안 script 태그 만들기

3. 구글 -> JQuery 검색 -> 두번째 아무거나 다운

4. 이왕이면 주소 다운받아서 쓰기!!

주소 편하게 가져오는법! ( 버전에 취약함 )

5. kr.smhrd.controller 패키지안 -> AjaxCon -> 클래스만들기

6. FrontController -> mappings.put( "/ajax.do", new AjaxCon() ); // 새로운 기능이 생기면 put으로 추가만 해주자

 

7. Ajax jsp -> 데이터값 넣어주기

$.ajax({
url : 'ajax.do', // 어디로?
type : 'post', // Get?, Post?
data : {
// data : "data=value&data2=value2..."
// key : value
"data" : "김줌이"

}, // 보낼 데이터
success : function(res) {
// 요청이 성공하면 실행될 콜백함수
// res > response
console.log(res);
},
error : function(e) {
// 요청이 실패하면 실행될 콜백함수
alert("요청 실패!");
}
});

 

8. AjaxCon -> 데이터 응답

response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print("응답입니다~~~");
return null;

 

9.  AjaxCon -> 데이터 수집

request.setCharacterEncoding("UTF-8");
String data = request.getParameter("data");
System.out.println(data);

 

10.  Ajax jsp 코드작성

<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>


<input type="text" name="data">

<!--
button == input type="submit"
input type="button" -->

<button id="btn" type="button">전송</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
// 비동기 통신(ajax) --> JQuery 라이브러리 필요

// 1. button 태그를 선택
// var btn = document.getElementById("btn");
var btn = $('#btn');
var input = $('input[name=data]');

// 2. button 태그에 이벤트 부여
btn.on('click', request);

function request() {
console.log("클릭!")

// 3. ajax를 사용해서 비동기 방식으로 요청 보내기
$.ajax({
url : 'ajax.do', // 어디로?
type : 'post', // Get?, Post?
data : {
// data : "data=value&data2=value2..."
// key : value
"data" : input.val()

}, // 보낼 데이터
success : function(res) {
// 요청이 성공하면 실행될 콜백함수
// res > response
console.log(res);
},
error : function(e) {
// 요청이 실패하면 실행될 콜백함수
alert("요청 실패!");
}
});

}
</script>

</body>
</html>

 

 

 

'학원 > Servlet' 카테고리의 다른 글

CheckCon( ID 중복체크 )  (0) 2023.05.09
Json / Gson  (0) 2023.05.08
EL  (0) 2023.05.04
EL / JSTL  (0) 2023.05.04
if문 -> haspmap 변경  (0) 2023.05.04
'학원/Servlet' Related Articles more