jQuery Ajax 실습

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

ajaxEx01.html

<input type="text" id="userIdSearch">
<button type="button" id="userIdCheckBtn">아이디중복검사</button>

idCheck.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%
   String userId = request.getParameter("userId");
%>
<%
//db에 회원 아이디 저장되어 있다는 가정
ArrayList<String> userId = new ArrayList<String>();
for(int i=0;i<100;i++){
	userId.add("id"+i);
}
%>

1. 답

ajaxEx01.html

<input type="text" id="userIdSearch">
<button type="button" id="userIdCheckBtn">아이디 중복 검사</button>

<script type="text/javascript">
	$(function() {
		var $userIdSearch = $('#userIdSearch');
		$('#userIdCheckBtn').click(function() {
			var userIdSearch = $userIdSearch.val();

			var request = $.ajax({
				url : "idCheck.jsp", //호출 주소(응답 페이지 url)
				method : "POST", //호출 방식
				data : {
					userId : userIdSearch
				}, //전달할 데이터 { key : value }
				dataType : "json" //응답 페이지의 콘텐츠 타입 text, xml, json, script, html
			});
			request.done(function(data) {
				console.log(data);
				if (data.result == 0) {
					console.log('사용 가능한 아이디');
				} else {
					console.log('사용 불가능한 아이디');
				}
			});
			request.fail(function(jqXHR, textStatus) {
				alert("Request failed: " + textStatus);
			});
		});
	});
</script>

idCheck.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");
   /*
      자바 컬렉션 프레임워크
      - 자료 구조를 다루는 클래스
      
      Map -> key-value / 키는 중복을 허용하지 않고 값은 중복 허용
      List -> 순차적으로 데이터가 저장되며 값 중복 허용한다.
      Set -> 순차적이지 않고 값 중복 허용하지 않는다.
            
   */
   
   int result = 0;
   // db에 회원 아이디 저장되어 있다는 가정
   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.put("result", result);
   
   Gson gson = new Gson();
   out.println(gson.toJson(map));
   
%>

 

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

ajaxEx01.html

<input type="text" id="userId">
<button type="button" id="userIdSearchBtn">아이디로 회원 검색</button>

<table border="1">
	<thead>
		<tr>
			<th>회원명</th>
			<th>회원나이</th>
			<th>회원지역</th>
		</tr>
	</thead>
	<tbody id="searchUserList">
		
	</tbody>
</table>​

userSearch.jsp

<%@ page language="java" contentType="text/html; 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(40);
   userDto.setUserAddr("익산");
   userMap.put("userId03", userDto);

%>
<%= userMap.get("userId01").toString()%>

 

2. 답

ajaxEx01.html

<input type="text" id="userId">
<button type="button" id="userIdSearchBtn">아이디로 회원 검색</button>

<table border="1">
	<thead>
		<tr>
			<th>회원명</th>
			<th>회원나이</th>
			<th>회원지역</th>
		</tr>
	</thead>
	<tbody id="searchUserList">

	</tbody>
</table>
<script type="text/javascript">
	$(function() {
		var $userId = $('#userId');
		var $tbody = $('#searchUserList');
		$('#userIdSearchBtn').click(function() {
			var userId = $userId.val();
			var request = $.ajax({
				url : "userSearch.jsp", //호출 주소(응답 페이지 url)
				method : "POST", //호출 방식
				data : {
					userId : userId
				}, //전달할 데이터 { key : value }
				dataType : "json" //응답 페이지의 콘텐츠 타입 text, xml, json, script, html
			});
			request.done(function(data) {
				html = ''; //문자열로 변환 하기위해

				if (data.userName != undefined) {
					html += '<tr>';
					html += '<td>';
					html += data.userName;
					html += '</td>';
					html += '<td>';
					html += data.userAge;
					html += '</td>';
					html += '<td>';
					html += data.userAddr;
					html += '</td>';
					html += '</tr>';
					$tbody.append(html);
				}
			});
			request.fail(function(jqXHR, textStatus) {
			});
		});
	});
</script>

userSearch.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;
      int result = 0;
   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(60);
   userDto.setUserAddr("부산");
   userMap.put("userId03", userDto);
   UserDto answer = userMap.get(userId);
   Gson gson = new Gson();
   if(answer != null)
   {
   out.println(gson.toJson(answer));
   }
   else
   {
      out.println("{}");//값을 넣지 않으면 posser 에러가 뜬다.
   }
%>

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

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

3. 답

ajaxEx01.html

<script type="text/javascript">
	$(function() {
		var $kg = $('#kg'), $cm = $('#cm'), $bmiPrint = $('#bmiPrint');

		$('#bmiBtn').click(function() {
			var kg = $kg.val(), cm = $cm.val()

			var request = $.ajax({
				url : "bmi.jsp", //호출 주소(응답 페이지 url)
				method : "POST", //호출 방식
				data : {
					kg : kg,
					cm : cm
				}, //전달할 데이터 { key : value }
				dataType : "json" //응답 페이지의 콘텐츠 타입 text, xml, json, script, html
			});
			request.done(function(data) {
				if (data != undefined) {
					var bmiResult = data.trim();
					console.log(bmiResult);
					if (bmiResult == '') {
						$bmiPrint.text('정상적인 값을 입력해주세요.');
					} else {
						$bmiPrint.text('당신은' + bmiResult + '입니다.');
					}
				}
			});

			request.fail(function(jqXHR, textStatus) {
				alert("연결 실패 : " + textStatus);
			});
		});
	});
</script>

bmi.jsp

<%@ page language="java" contentType="applicatin/json; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson"%>
<%
	String kgStr = request.getParameter("kg");
	String cmStr = request.getParameter("cm");

	double kg = 0;
	double cm = 0;
	double bmi = 0;
	double m = 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);
	}

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

	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 = "고도비만";
	}

	Gson gson = new Gson();
	out.println(gson.toJson(msg));
%>