Ajax - json

data type이 json인 파일과 통신하여 화면에 호출해보자..

먼저, contentType을 변경해줘야 한다.

▶ gson

외부 라이브러리 사용하는것도 좋은 방법이다.

json구조를 띄는 직렬화된 데이터를 JAVA의 객체로 역직렬화, 직렬화 해주는 자바 라이브러리 입니다.

▶ gson 다운로드

gson 사용하기

▶ gson 사용 방법

- ajax 코드 부분

<button type="button" id="ajaxCall">호출</button>
<input type="text" id="ajaxResult" readonly="readonly" placeholder="회원명">
<script type="text/javascript">
	$(function(){
		$('#ajaxCall').click(function(){
			var request = $.ajax({
			  url: "ajaxjsonCall.jsp",
			  method: "POST",		
			  dataType: "json"			
			});
			request.done(function(data) {
			  	console.log(data);
			  	if(data != undefined && data !=''){
			  		$('#ajaxResult').val(data.age)
			  	}
			});
			request.fail(function( jqXHR, textStatus ) {
			  alert( "Request failed: " + textStatus );
			});
		});
	});
</script>

호출 버튼을 눌렀을 때, 통신하고자 하는 url ajaxjsonCall.jsp파일과 연결되며, 전송할 데이터는 없지만 아래의 gson과 연동된 곳에서 데이터를 받아온다. 그 후 input박스의 value값으로 받아온 데이터를 넣어주기로 하였다.

- 호출하고 싶은 파일(gson과 연동)

<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%
	Gson gson = new Gson();//Gson 인스턴스화(객체화)
	Map map = new HashMap();//Map을 객체화 하기
	map.put("name", "홍길동");
	map.put("age", 25);
	map.put("array",new String[]{"전주","익산"});
	String json = gson.toJson(map);
	out.print(json);
%>

map이라는 객체에 put메서드를 활용하여 값을 저장한다.

toJson의 메서드를 활용하여 키와 값이 있는 객체를 json 방식으로 출력한다.

위의 ajax에서 data.age를 호출하여 값을 받아왔으므로 "age"의 25가 출력된다.

Ajax-json 실습

- json으로 불러올 데이터 확인하기

url에 저런식으로 검색하면, 아래와 같은 결과가 화면에 나온다.

이렇게 나오는지 확인이 되었다면, 어떤식으로 코드를 짜서 결과를 도출할지 보다 쉬워질 것이다.

막힌다면 항상 확인을 해보도록 하자.

▶ 실습1

데이터베이스에 아이디가 있다고 가정하고(id001,id002,id003) ajax를 활용하여 아이디 중복확인 검사를 해보자.

<style type="text/css">
	.err{border: 1px solid #ff0000;}
	.ok{border: 1px soild #000000;}
</style>

<input type="text" id="memberId" class="ok">
<button type="button" id="idCheckBtn">아이디 중복 확인</button>

#idCheckBtn을 클릭시 #memberId 값을 가지고 ajaxIdCheck.jsp 파일에 ajax를 활용하여 통신하자.

아이디가 이미 존재한다면 #memberId에 클래스를 .err 로변경하고 존재하지 않는다면 .ok(기본)로변경하자.

- ajax.html

- ajaxIdCheck.jsp

데이터 베이스에서 조회하였다는 가정 하에, 아래에 데이터를 나열한다. 나열된 데이터는 이미 존재하는 아이디 이다. id001,id002 가 존재한다고 가정한다. 이외의 값이 들어오면 없는 아이디이다.(조건문처리)

- ajax.html

- ajaxIdCheck.jsp

- ajax.html

- ajaxIdCheck.jsp

- ajax.html

$(function(){
	$('#idCheckBtn').click(function(){
		var request = $.ajax({
		  url: "ajaxIdCheck.jsp",
		  method: "POST",			
		  data: { len : $('#memberId').val() },		
		  dataType: "json"			
		});
		request.done(function(data) {
		  	console.log(data);
			if(data != undefined && data != ''){
				if(data.result == "Y"){
					$('#memberId').removeClass('.err').addClass('.ok');	
				}else{
					$('#memberId').removeClass('.ok').addClass('.err');	
				}
			}
		});
		request.fail(function( jqXHR, textStatus ) {
		  alert( "Request failed: " + textStatus );
		});
	});
});

- ajaxIdCheck.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap"%>
<%
	String len = request.getParameter("len");
	Gson gson = new Gson();
	Map map = new HashMap();
	if("id001".equals(len) || "id002".equals(len) || "".equals(len) || len == null){
		map.put("result", "N");		
	}else{		
		map.put("result", "Y");
	}
	String json = gson.toJson(map);
	out.print(json);
%>

▶ 실습2

NCS 학습모듈 검색처럼, 중분류, 소분류, 세분류로 나뉘는 탭 박스를 ajax를 이용하여 만들어 보도록 하자.

아래의 비어있는 select 태그에 출력하자. 예로 2개씩만 출력해보도록 하자. 호출경로- ajaxSearchData.jsp

<select multiple="multiple" id="step1" data-step="1">
	<option value="정보기술">정보기술</option>
	<option value="통신기술">통신기술</option>
	<option value="방송기술">방송기술</option>
</select>
<select multiple="multiple" id="step2" data-step="2">
</select>
<select multiple="multiple" id="step3" data-step="3">
</select>

-ajax.jsp 파일

var step = $(this).attr('data-step'); 에 data-step을 설정하지 않고, 스텝을 아이디로 가져왔을 경우 아래처럼 사용해도 된다.

-ajaxSearchData.jsp

데이터가 데이터베이스에 있다고 가정 하에 했다.

-ajax.jsp 파일

var step = $(this).attr('data-step'); 에 data-step을 설정하지 않고, 스텝을 아이디로 가져왔을 경우 아래처럼 사용해도 된다.

-ajaxSearchData.jsp

데이터가 데이터베이스에 있다고 가정 하에 했다.

-ajax.jsp 파일

var step = $(this).attr('data-step'); 에 data-step을 설정하지 않고, 스텝을 아이디로 가져왔을 경우 아래처럼 사용해도 된다.

-ajaxSearchData.jsp

데이터가 데이터베이스에 있다고 가정 하에 했다.

-ajax.jsp 파일

<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery-3.4.1.min.js">
</script>
<script>
$(function(){
	$('#step1, #step2').change(function(){
		var searchData = $(this).val();
		var step = $(this).attr('data-step');
		console.log(searchData,step);
		var request = $.ajax({
		  url: "<%=request.getContextPath()%>/ajaxSearchData.jsp",
		  method: "POST",			
		  data: { searchData : searchData[0], step :step },		
		  dataType: "json"			
		});
		request.done(function(data) {
			if(data.length != undefined){
				var html='';
				for(var i=0;i<data.length;i++){
					html+= '<option value="'+data[i]+'">';
					html+= data[i];
					html+= '</option>';
				}
				if(step=='1'){
					$('#step2').html(html);
				}else{
					$('#step3').html(html);
				}
			}
		});
		request.fail(function( jqXHR, textStatus ) {
		  alert( "Request failed: " + textStatus );
		});
	});
});
</script>

var step = $(this).attr('data-step'); 에 data-step을 설정하지 않고, 스텝을 아이디로 가져왔을 경우 아래처럼 사용해도 된다.

var searchId = $(this).attr('Id');
var step = 1;
if(searchId == 'step2'){
	step = 2;
}

-ajaxSearchData.jsp

<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="com.google.gson.Gson" %>
<%	
String step = request.getParameter("step");
String searchData = request.getParameter("searchData");

Map stepMap = null;
if("1".equals(step)){
	stepMap = new HashMap();
	stepMap.put("정보기술",new String[]{"정보기술개발","정보기술운영"});
	stepMap.put("통신기술",new String[]{"유선통신구축","무선통신구축"});
	stepMap.put("방송기술",new String[]{"방송제작기술","방송플랫폼기술"});	
}

if("2".equals(step)){
	stepMap = new HashMap();
	stepMap.put("정보기술개발",new String[]{"SW아키텍처","응용SW엔지니어링"});
	stepMap.put("정보기술운영",new String[]{"IT시스템관리","IT기술교육"});
	stepMap.put("유선통신구축",new String[]{"교환시스템구축","구내통신구축"});
	stepMap.put("무선통신구축",new String[]{"무선통신시스템구축","전송시스템구축"});
	stepMap.put("방송제작기술",new String[]{"중계방송","방송품질관리"});
	stepMap.put("방송플랫폼기술",new String[]{"라디오방송","지상파tV방송"});
}

if(stepMap != null){//맵 객체가 생성이 되었다면
	Gson gson = new Gson();
	//맵이 객체화 되면서 담긴 데이터를 Map클래스의 get메서드로 조회하여 json으로 출력한다.
	String json = gson.toJson(stepMap.get(searchData));
	out.print(json);
}else{//맵 객체가 생성이 되지 않았다면
	out.print("{}");
}
%>

데이터가 데이터베이스에 있다고 가정 하에 했다.

'JavaScript&JQuery' 카테고리의 다른 글

Ajax 회원가입 유효성 검사 (0)	2020.04.08
Checkbox (0)	2020.04.08
Ajax - HTML (0)	2020.04.08
Ajax (0)	2020.04.08
객체 조작 메서드 활용 - 동적 바인딩 (0)	2020.04.08

웹 개발자의 공부 블로그

Ajax - json

Ajax - json

gson 사용하기

Ajax-json 실습

'JavaScript&JQuery' 카테고리의 다른 글

티스토리툴바

Ajax - json

Ajax - json

gson 사용하기

Ajax-json 실습

'JavaScript&JQuery' 카테고리의 다른 글

'JavaScript&JQuery' Related Articles

티스토리툴바