everyday com-eat
관리
글쓰기
everyday com-eat
카테고리
250x250
카운터

  • 오늘 ―
    어제 ―

(jQuery) Ajax

카테고리
{ "Hello World!" };/JavaScript／jQuery
작성일
2022. 1. 29. 01:48
작성자
갱수터
728x90

jQuery Ajax

- XMLHttpRequest 객체를 활용하여 가공된 ajax 메서드 -> $. ajax()

- 비동기화 방식 통신

- text, html, json, xml을 주로 비동기화 통신시 사용한다.

- 브라우저에서 ajax 통신시 같은 도메인에서만 기본 허용하고 있다.

- CORS 정책 위반으로 비동기화 통신 못할 경우 응답쪽에서 헤더에 Access-Control-Allow-Origin 값 설정 혹은 요청 서버(서버언어로)에서 비동기화 통신해야한다.

 

 

1. dataType=html (html파일)

(요청페이지) HTML 코드

<button type="button" id="ajaxSend">ajax 호출</button>

<div id="htmlPrint">
	버튼을 클릭해주세요.
</div>

 

요청페이지(ajax01.html)실행화면

 

(응답페이지) HTML 코드

<div id="sendDiv">
	<h1>ajax 응답 페이지</h1>
	응답 페이지 입니다.
	<button type="button" id="send01">send</button>
</div>

 

 

(요청페이지) jQeury  코드

( jQeury ajax Documentation 에서 설명과 sample 코드를 확인할 수 있다 )

( 2022.01.14 - [{ "Hello World!" };/JavaScript／jQuery] - (JavaScript) 콜백 함수, cloneNode 동적바인딩 )

$(function() {
$('#ajaxSend').click(function() {
	var request = $.ajax({
		url: "send01.html",		//호출 주소(응답 페이지 url)
		method: "POST",			//호출방식
		//data: { id : menuId },	//전달할 데이터 {key : value}
		dataType: "html"		//응답 페이지의 콘텐츠 타입 text,xml,json(js값),script,html
		//html -> 정적, 데이터 못받음
	});
	
	//정상적인 통신이 완료 되었을 경우 반응하는 메서드
	//인수에 삽입된 함수 실행이 되며, 결괏값은 콜백데이터로 전달이 된다.
	request.done(function( data ) {
		console.log(data);
		$('#htmlPrint').html(data);
	});
	 
	//비정상적인 통신이거나 실패 경우 실행되는 메서드
	//인수에 삽입된 함수가 실행이되며, 결괏값은 실패에 관련된 내용이 콜백데이터로 전달이 된다.
	
	request.fail(function( jqXHR, textStatus ) {
		alert( "Request failed: " + textStatus );
	});
	
});
});

$(document).on('click','#send01',function(){	//동적바인딩
	alert(1);
});
'ajax 호출'버튼을 클릭했을 때


'send' 버튼을 클릭했을 때(동적바인딩 사용) , 응답페이지 html파일에서도 javascript 사용가능

 

 

 

2. dataType = html (jsp파일)

(요청페이지) HTML 코드

<h1>jQuery Ajax2</h1>
<button type="button" id="ajaxSend">ajax 호출</button>
<div id="htmlPrint"></div>

실행화면

 

(응답페이지) JSP 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String cnt = request.getParameter("cnt");
%>
<div>
	<%=cnt %>
	<button type="button" class="send02">send02</button>
</div>

실행화면

 

(요청페이지) jQuery 코드

$(function() {
	var cnt =0;
	$('#ajaxSend').click(function() {
		var request = $.ajax({
			url: "send02.jsp",
			method: "POST",
			data: { cnt : cnt },
			dataType: "html"
		});
		
		request.done(function( data ) {
			console.log(data);
			$('#htmlPrint').append(data);
		});

		request.fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
		});
        
		cnt++;
	});
});

$(document).on('click','.send02',function(){
	alert(1);
});

'ajax 호출'버튼을 계속해서 누를 때, cnt값이 증가하며 추가됨

'send02' 버튼을 누르면 alert창 뜸

 

 

3. dataType = json (jsp파일)

(요청페이지) html 코드

<h1>jQuery Ajax 3 - json</h1>

<button type="button" id="ajaxSend">ajax 호출</button>

<ul id="ul01">
	
</ul>

실행화면

 

(응답페이지) jsp 코드

<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="kr.or.ksmart.dto.UserDto" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.ArrayList" %>

<%
//데이터베이스에서 회원1명의 정보를 가지고 왔다는 가정
ArrayList<UserDto> userList = new ArrayList<UserDto>();	
UserDto dto = null;
for(int i=0; i<15; i++){		
	dto =new UserDto();
	dto.setUserName("홍길동"+i);
	dto.setUserAge(20);
	dto.setUserAddr("전주"+i);
	userList.add(dto);
}

Gson gson = new Gson();
String json = gson.toJson(userList);

out.println(json);
%>
응답방식이 json일 경우
1. contentType -> application/json
2. {"key" : "value"} or [{"key" : "value"}] 형태의 포맷방식 
2-1. 이스케이프시퀀스를 활용 ->문자열 안에 쓰지 못하는 문자(ex. ")들은 앞에 \를 붙인다
3. 이스케이프시퀀스는 표현하기 힘들기 때문에 외부 api 활용 google의 Gson   

실행화면

 

(요청페이지) jQuery 코드

$(function() {
	var $ul01 = $('#ul01');
	
	$('#ajaxSend').click(function() {
		var request = $.ajax({
			url: "json01.jsp",
			method: "POST",	
			dataType: "json"
		});				

		request.done(function( data ) {
			for(var i=0; i<data.length; i++){
				var
				userName = data[i].userName,
				userAge = data[i].userAge,
				userAddr = data[i].userAddr,
				html = '';
				
				html += '<li>';
				html += userName + '/' + userAge + '/' + userAddr;
				html += '</li>';
				
				$ul01.append(html);
			}
		});
		
		request.fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
		});
	});
});

'ajax 호출' 버튼 클릭시 

 

 

 

실습

더보기

실습1

아래의 버튼 클릭시 #userIdSearch에 담긴 값을 가지고 idCheck.jsp의 페이지와 비동기화 통신하여 값 중복 여부의 결괏값을 확인하여 콘솔에 출력하도록 하여라.

요청페이지 html 
<input type="text" id="userIdSearch">
<button type="button" id="userIdCheckBtn">아이디중복검사</button>
응답페이지 jsp 
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
//db에 회원 아이디 저장되어 있다는 가정(id0~id99)
List<String> userId = new ArrayList<String>();
for(int i=0; i<100; i++){
	userId.add("id"+i);
}

 

풀이

응답페이지 jsp 
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
//db에 회원 아이디 저장되어 있다는 가정(id0~id99)
List<String> userId = new ArrayList<String>();
for(int i=0; i<100; i++){
	userId.add("id"+i);
}

String userIdSearch = request.getParameter("userIdSearch");

int cnt=0;
for(String s: userId){
	 if(s.equals(userIdSearch))cnt++;
}

Gson gson = new Gson();
String json=null; 	
if(cnt==0)json = gson.toJson(userIdSearch);

out.println(json);
요청페이지 jQuery 
$('#userIdCheckBtn').click(function(){
	var userIdSearch = $('#userIdSearch').val();
	var request = $.ajax({
		url: "idCheck.jsp",
		method: "POST",
		data: { userIdSearch : userIdSearch },
		dataType: "json"
	});	
	
	request.done(function(data){
		if(data != null){
			console.log('사용 가능한 아이디 입니다.');
		}else {
			console.log('사용 불가능한 아이디 입니다.');
		}
	});
	
	request.fail(function( jqXHR, textStatus ) {
		alert( "Request failed: " + textStatus );
	});			
});

1. id1 입력
2. id105 입력

 

선생님 풀이

응답페이지 jsp 
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.google.gson.Gson" %>
<%
String id = request.getParameter("userId");
int result = 0;

//db에 회원 아이디 저장되어 있다는 가정(id0~id99)
List<String> userId = new ArrayList<String>();
for(int i=0; i<100; i++){
	userId.add("id"+i);
}

if(userId.contains(id))result++;

Map<String, Integer> map = new HashMap<String, Integer>();
//put -> 키와 값을 저장 할 수 있는 메서드
//get -> 키를 인수에 삽입하여 키에 연결된 값을 가지고 온다.
//map.get("result")
map.put("result", result);

Gson gson = new Gson();
out.println(gson.toJson(map));
%>
요청페이지 jquery 
var $userIdSearch = $('#userIdSearch');
$('#userIdCheckBtn').click(function() {
	var userIdSearch = $userIdSearch.val();			
	var request = $.ajax({
		url: "idCheck.jsp",		
		method: "POST",			
		data: { userId : userIdSearch }, //응답페이지를 만들고 키와 값 설정
		dataType: "json"		
	});	
	
	request.done(function(data){
		if(data.result == 0){
			console.log('사용 가능한 아이디 입니다.');
		}else {
			console.log('사용 불가능한 아이디 입니다.');
		}
	});
	
});

 

더보기

실습2

#userIdSearchBtn 버튼 클릭시 #userId에 기입된 회원 아이디를 가지고 userSearch.jsp와 비동기화 통신을하여 아이디와 일치하는 회원 정보를 가지고와 #searchUserList에 행을 추가하도록 하여라.

요청페이지 html 
<input type="text" id="userId">
<button type="button" id="userIdSearchBtn">아이디로 회원 검색</button><br><br>
<table border="1">
	<thead>
		<tr>
			<th>회원명</th>
			<th>회원나이</th>
			<th>회원지역</th>
		</tr>
	</thead>
	<tbody id="searchUserList">
		
	</tbody>
</table>
응답페이지 jsp 
<%@ page language="java" contentType="application/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="kr.or.ksmart.dto.UserDto" %>
<%
	String userId = request.getParameter("userId");
	/*
		회원 테이블에 회원정보가 담겨 있다는 가정
	*/
	
	Map<String, UserDto> userMap = new HashMap<String, UserDto>();
	UserDto userDto = null;
	
	userDto = new UserDto();
	userDto.setUserName("홍길동");
	userDto.setUserAge(20);
	userDto.setUserAddr("전주");
	userMap.put("userId01", userDto);
	
	userDto = new UserDto();
	userDto.setUserName("이순신");
	userDto.setUserAge(30);
	userDto.setUserAddr("군산");
	userMap.put("userId02", userDto);
	
	userDto = new UserDto();
	userDto.setUserName("고길동");
	userDto.setUserAge(25);
	userDto.setUserAddr("익산");
	userMap.put("userId03", userDto);
    
%>

 

풀이

응답페이지 jsp 
/*
	1. 넘어온 아이디랑 db아이디랑 비교
	2. 있다면 아이디에 담겨있는 값 json객체로 화면에 출력시키기
*/

String userId = request.getParameter("userId");
Gson gson = new Gson();
String json = null;

if(userMap.containsKey(id)){
	json = gson.toJson(userMap.get(id));
}
out.println(json);
get 방식으로 데이터 받았다고 가정하고 결과보기
요청페이지 jquery 
var
$userId = $('#userId'),
$searchUserList = $('#searchUserList');

$('#userIdSearchBtn').click(function() {
	var userId = $userId.val();
    
	var request = $.ajax({
		url: "userSearch.jsp",		
		method: "POST",			
		data: { userId : userId },
		dataType: "json"		
	});	
	
	request.done(function(data){
		if(data != null){
			var tr = '';
			tr += '<tr>';
			tr += '<td>'+data.userName+'</td>';
			tr += '<td>'+data.userAge+'</td>';
			tr += '<td>'+data.userAddr+'</td>';
			tr += '</tr>';
			$('#searchUserList').append(tr);
			
		}else {
			alert('회원정보가 확인되지 않습니다.')
		}
	});
	
});

userId01 / userId01 / userId02 / userId03 순서대로 입력 후 버튼 클릭 결과

 

선생님 풀이

응답페이지 jsp 
UserDto getUserDto = userMap.get(userId);
if(getUserDto != null){
	Gson gson = new Gson();
	out.println(gson.toJson(getUserDto));
}else {
	out.println("{}");
}
요청페이지 jquery 
var $userId = $('#userId'),
$searchUserList = $('#searchUserList');
$('#userIdSearchBtn').click(function() {
	var userId = $userId.val();
	var request = $.ajax({
		url: "userSearch.jsp",		
		method: "POST",			
		data: { userId : userId },
		dataType: "json"		
	});	
	
	request.done(function(data){
		var 
		userName = data.userName,
		userAge = data.userAge,
		userAddr = data.userAddr,
		html = '';
	
		if(userName != undefined){
			html +='<tr>';
			html +='<td>';
			html += userName;
			html +='</td>';
			html +='<td>';
			html += userAge;
			html +='</td>';
			html +='<td>';
			html += userAddr;
			html +='</td>';
			html +='</tr>';
			$searchUserList.append(html);
		}		
	
	});
	
});

 

더보기

실습3

아래의 버튼 클릭시 입력된 키와 몸무게를 가지고 bmi.jsp 비동기화 통신을 하여 bmi 결괏값을 아래의 #bmiPrint에 출력하도록 하여라. 

요청페이지 html 
몸무게 :<input type="text" id="kg" placeholder="몸무게">
키 : <input type="text" id="cm" placeholder="키">
<button type="button" id="bmiBtn">결과확인</button>
<div id="bmiPrint">
	결과확인을 클릭 해주세요.
</div>

<!-- 
m=cm/100
BMI지수= 몸무게(kg) ÷ (신장(m) × 신장(m))
		
산출된 값이
18.5 이하면 저체중
18.5~ 23은정상
23~25는 과체중
25~30은 비만
30이상은 고도비만
-->

실행시

 

풀이

응답페이지 html 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String kgstr = request.getParameter("kg");	
String cm = request.getParameter("cm");

double bmi=0, kg=0, m=0;	
String result="";



if( kgstr.equals("") || cm.equals("")){
	result="값을 입력해 주세요";
	
}else{
	kg = Double.parseDouble(kgstr); 
	m = Double.parseDouble(cm);	
	m = m/100;
	
	bmi = kg / (m*m);
	
	if(bmi <= 18.5){
		result = "저체중";
	}else if(bmi>18.5 && bmi<= 23){
		result = "정상";
	}else if(bmi>23 && bmi<= 25){
		result = "과체중";
	}else if(bmi>25 && bmi<= 30){
		result = "비만";
	}else{
		result="고도비만";
	}
	
}	

out.println(result);
%>
요청페이지 jquery 
var
$kg = $('#kg'),
$cm = $('#cm'),
$bmiPrint = $('#bmiPrint');

$('#bmiBtn').click(function() {
	var
	kg = $kg.val(),
	cm = $cm.val();
	
	var request = $.ajax({
		url: "bmi.jsp",		
		method: "POST",			
		data: { kg : kg, cm : cm },
		dataType: "html"		
	});	
	
	request.done(function(data){
		console.log(data);
		$bmiPrint.html(data);		
	});
});

몸무게 50, 키150 입력후 결과확인 버튼 눌렀을 때 결과

1. datatype이 html이면 text도 다 가져온다고 해서 contentType이랑 신경 안썼는데 text값을 가져오고 싶으면 text/plain으로 변경해줘야함 근데 굳이 안바꿔도 잘 가져오긴함
2. 또 구글에 문자열 int 형변환 검색함... 진짜 날잡고 valueOf, parseInt 개념 확실하게 잡아야할듯...
3. 처음에 풀기는 빨리 풀었는데 null값 체크하는게 까다로웠다.. 실제 업무에서는 요청페이지에서의 유효성 검사와, 응답페이지의 예외처리 이중체크를 해줘야한다고 한다... 

 

선생님 풀이

응답페이지 html 
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String kgStr = request.getParameter("kg");
String cmStr = request.getParameter("cm");

double kg =0, cm=0, m=0, bmi=0;

if(kgStr != null && !"".equals(kgStr.trim())){
	kg = Double.parseDouble(kgStr);
}
if(cmStr != null && !"".equals(cmStr.trim())){
	cm = Double.parseDouble(cmStr);
}

m = cm /100;
if(m>0){
	bmi = kg / (m * m);
}

String msg="";
if(bmi >0 && bmi < 18.5){
	msg ="저체중";
}else if( bmi >= 18.5 && bmi < 23) {
	msg ="정상";	
}else if( bmi >= 23 && bmi < 25) {
	msg ="과체중";
}else if( bmi >= 25 && bmi < 30) {
	msg ="비만";
}else if(bmi >= 30){
	msg ="고도비만";
}

out.println(msg);
%>
요청페이지 jquery 
var
$kg = $('#kg'),
$cm = $('#cm'),
$bmiPrint = $('#bmiPrint');

$('#bmiBtn').click(function() {
	var
	kg = $kg.val(),
	cm = $cm.val();
	
	var request = $.ajax({
		url: "bmi.jsp",		
		method: "POST",			
		data: { kg : kg, cm : cm },
		dataType: "text"		
	});				
	request.done(function(data){
		if(data != undefined) {
			var bmiResult = data.trim();
			console.log(data);	
			
			if(bmiResult == ''){
				$bmiPrint.text('정상적인 값을 입력해주세요.');
			}else{
				$bmiPrint.text('당신은 ' + bmiResult + ' 입니다');
			}
		}
	});
	
	request.fail(function() {
		alert("Request failed");
	});
});
728x90
저작자표시

'{ "Hello World!" }; > JavaScript／jQuery' 카테고리의 다른 글

(jQuery) 선택한 날짜 요일, 주차 구하기  (0) 2022.11.03
js/id, for 속성에 인덱스 부여하기  (0) 2022.04.12
(jQuery) 동적바인딩  (0) 2022.01.27
js/ 속성 조작 메서드(prop) 실습  (0) 2022.01.23
(jQuery) 메서드  (0) 2022.01.23

티스토리툴바