2020/09/09 : jQuery : ajax

기본 설정

ajax 관련 수업 시작하기 전, 프로젝트 구조 확인하기

WEB-INF > lib > gson-2.8.5.jar

WebContent > js > jquery-3.4.1.min.js

* Java Resources > src > com.heidi.dto > Member.java

그리고 private 멤버변수의 getter, setter들도 완성해놓기

package com.heidi.dto;

public class Member {
	private String name;
	private String age;
	private String address;
	
	public Member() {
	}
	
	@Override
	public String toString() {
		return "Member [name=" + name + ", age=" + age + ", address=" + address + "]";
	}
	
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}


}

* WebContent > ajax_data.html

( 아래는 ajax_data.html 의 기본 코드 )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax.html</title>
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
	</script>
</head>
<body>
	<button type="button" id="ajaxCall">호출</button>
</body>
</html>

6 :: src 에서 "."은 현재 내 위치를 뜻함.

즉 현재 위치(WebContent) 의 js라는 폴더 내부의 jquery-3.4.1.min.js 를 사용하겠다~

* WebContent > ajax_Result.jsp

( 기본 코드 )

코드

* ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax.html</title>
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// 아래 버튼을 클릭했을 때, ajaxResult.jsp를 호출 할 것임!
			// 이 때, ajax() 함수를 사용해서 전송방식 등을 설정할것임
			$('#ajaxCall').click(function() {
				var request = $.ajax({
					url : "ajax_Result.jsp",	// 호출될 url
					method : "POST",			// 메서드type : 전송방식
					data : { paramNum : 1 },     // 전송되는 파라미터
					dataType : "json"			// 응답 타입
				});
				
				// 응답 완료 후 실행 - 정상 처리
				request.done(function( data ) {
					console.log(data)
					/* data는 ajax_Result.jsp 에서 응답하는 json 포맷방식의 데이터를 가져와서
					   javaScript Object(객체) 방식으로 변환한다.
					      객체.속성 형태로 값을 꺼내올 수 있다. */
					console.log(data.param1)
					console.log(data.param2)
				});
				
				// 에러발생 시 실행
				request.fail(function( jqXHR, textStatus ) {
					alert( "Request failed : " + textStatus );
				});
			}); // click() END
		}); // ready() END
	</script>
</head>
<body>
	<button type="button" id="ajaxCall">호출</button>
</body>
</html>

jQuery가 만들어 놓은 ajax 함수를 가장 먼저 실행시켜야하며, 그 내부{}에는 설정값들이 존재한다!

설정값들은 위에서와 같이 중괄호{ }로 묶어줘야한다.

url, method, data, dataType 은 수정 불가능! 그대로 써야 한다.

: 뒤의 것은 수정 가능!

url => 누구에게 보낼것인지 해당 파일의 경로 적어주기 (필수)

method => 대,소문자 구별 해야하며, "POST" 또는 "GET" 방식! (필수)

data => 전송할 데이터가 없는 경우 생략 가능

만약 여러개의 데이터를 보낼 경우 쉼표를 이용해 각 데이터들을 구별해줘야한다. 아래와 같이 가능!

ex ) data : { paramNum : 1 , paramNum : 2 , paramNum : 3 }

dataType => 응답받을(전달받을) 데이터가 없을 때 dataType도 생략 가능

요청에 대한 응답이 성공적으로 끝나면, done 이란 함수가 자동호출됨

요청에 대한 응답이 실패로 끝나면 fail 이란 함수가 자동호출됨

done, fail 함수는 괄호( ) 안에 어떤 것들을 처리할 수 있는 함수가 온다.

만약 요청에 대한 응답이 성공적으로 끝난다면, dataType 에서 전달받는 "json" 이 request.done(function( data )) { } 함수의 data 로 들어가게된다.

만약 에러가 발생해서 요청에 대한 응답이 실패로 끝났을 경우, 실패한 메시지는 두 번째 매개변수를 통해서 전달된다.

request.fail(function( jqXHR, textStatus ) { }

위의 경우, textStatus 로 실패 메시지가 들어간다.

이동 언어끼리 서로 소통할 수 있는 기법을 구현 해 놓았다는 것이 가장 큰 특징!

JSP 와 PHP는 서로 호환이 안되는데 ajax에 의해 호환이 가능하다.

< ajax 에서 다루는 mimetype 종류 >

application / json : json

text / plain : text

text / html : html

text / xml : xml

타입명(확장자) : mimetype (응답페이지에 서술)

즉, ajaxResult.jsp 내부에서 response.setContentType("application/json"); 과 같이..

* ajax_Result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>
<%
	// 응답 콘텐츠 타입 설정
	response.setContentType("application/json");
	/*
		Content-Disposiont : inline => 브라우저에서 응답하기
		Content-Disposiont : attachment => 팝업(alert) 형태로 응답하기
	*/
	// 해당 헤더로 브라우저에서 바로 응답
	response.setHeader("Content-Disposiont", "inline");
		
	String paramNum = request.getParameter("paramNum");
	System.out.println("=>" + paramNum + " : 파라미터 확인!");
	
	Map<String, Object> map = new HashMap<String, Object>();
	Gson gson = new Gson();
	map.put("param1", "1");
	map.put("param2", "2");
	
	if ("1".equals(paramNum)) {
		map.put("param1", "1");
	} else if ("2".equals(paramNum)) {
		map.put("param2", "2");
	} else {
		map.put("param1", "1");
		map.put("param2", "2");
	}
	
	String Json = gson.toJson(map);
	out.println(Json);
%>

여기까지 코딩 끝낸 뒤,

ajax.html 실행시킨 후 결과

이렇게 이클립스의 Console창, 브라우저의 개발자모드(f12)의 Console창 보이게 한 뒤,

"호출" 누르면,

json 객체가 반환되어 해당 데이터들이 출력되는걸 볼 수 있고,

이클립스의 콘솔창에도 파라미터가 확인되었다고 print되는걸 볼 수 있다.

.js 파일로 처리하기

=> 코드가 훨씬 깔끔해지는 결과를 기대할 수 있다.

ajax.html 을 복사해서 ajax2.html로 만들자.

두 번째 script 태그 내부를 파일 처리할것임!

ajax2.html 에서 아래와 같이 선택한 영역을 잘라내자.

그리고 WebContent > js 폴더에서 마우스 오른쪽 버튼 클릭,

Other 클릭 후, 아래와 같이 JavaScript를 찾아서

세 번째에 있는 JavaScript Source File 선택 후 Next!

희망파일명.js => Finish

a_text.js 로 가서 처음에 잘라내기 했던 코드 붙여넣고

저장!

다시 ajax2.html 로 가서 아래와 같이 코드 작성 후 실행하면, ajax.html 과 동일하게 결과가 나와야한다.

실행 결과

중복된 아이디인지 아닌지를 Json을 이용해 알아내기

기본 코드

( ajaxTest.html )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxTest.html</title>
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {


		}); 
	</script>
</head>
	<!-- 
		문제 1. 회원아이디 체크 폼과 확인 버튼을 만들고 확인을 눌렀을 경우,
		ajax를 통하여 아이디 중복 확인을 할 수 있는 기능을 만들어주세요.
		( 단, 아이디는 임의의 값과 비교.. DB를 통해 조회한다고 가정하자. )
	 -->
<body>
	<input type="text" id="memberId" />
	<button type="button" id="idCheckBtn">중복확인</button>
</body>
</html>

( ajaxCallTest.jsp )

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>
<%
	// 응답 요청 타입 설정

	// 반응 타입 (브라우저 or 팝업창)
	
	// 브라우저에서 바로 응답하게 만들기
	
	// memberId를 ajaxTest.html에서 받는다.
	
	// Map 타입으로 응답 데이터 저장
	
	// Gson을 활용하여 json 포맷 방식으로 반환

	// DB에서 조회했다는 가정 하에 처리
	
	// 반환
	
%>

Heidi 답!

* ajaxTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxTest.html</title>
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// 아래 버튼을 클릭했을 때, ajaxResult.jsp를 호출 할 것임!
			// 이 때, ajax() 함수를 사용해서 전송방식 등을 설정할것임
			$('#idCheckBtn').click(function() {
				var id = $('#memberId').val();
				var request = $.ajax({
					url : "./ajaxCallTest.jsp",	// 호출될 url
					method : "POST",			// 메서드type : 전송방식
					data : { memberId : id },   // 전송되는 파라미터
					dataType : "json"			// 응답 타입
				});
				
				// 응답 완료 후 실행 - 정상 처리
				request.done(function( data ) {
					console.log(data)
					/* data는 ajax_Result.jsp 에서 응답하는 json 포맷방식의 데이터를 가져와서
					   javaScript Object(객체) 방식으로 변환한다.
					      객체.속성 형태로 값을 꺼내올 수 있다. */
					console.log(data.param1)
					console.log(data.param2)
					console.log(data.param3)
					
					if (data.param3 == null) {
						alert("중복된 아이디 입니다.");
					}
					else {
						alert("사용 가능한 아이디 입니다.");
					}
					
				});
				
				// 에러발생 시 실행
				request.fail(function( jqXHR, textStatus ) {
					alert( "Request failed : " + textStatus );
				});
			}); // click() END
		}); // ready() END
	</script>
</head>
	<!-- 
		문제 1. 회원아이디 체크 폼과 확인 버튼을 만들고 확인을 눌렀을 경우,
		ajax를 통하여 아이디 중복 확인을 할 수 있는 기능을 만들어주세요.
		( 단, 아이디는 임의의 값과 비교.. DB를 통해 조회한다고 가정하자. )
	 -->
<body>
	<input type="text" id="memberId" />
	<button type="button" id="idCheckBtn">중복확인</button>
</body>
</html>

* ajaxCallTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.*" %>
<%
	// 응답 요청 타입 설정
	response.setContentType("application/json");

	// 반응 타입 (브라우저 or 팝업창)
	// 팝업창 사용할꺼임!
	response.setHeader("Content-Disposiont", "attachment");
	
	// memberId를 ajaxTest.html에서 받는다.
	String memberId = request.getParameter("memberId");
	System.out.println("=>" + memberId + " : 아이디가 입력되었습니다.");
	
	// Map 타입으로 응답 데이터 저장
	Map<String, Object> map = new HashMap<String, Object>();
	Gson gson = new Gson();
	map.put("param1", "id002");
	map.put("param2", "id005");
	
	if ("id002".equals(memberId)) {
		map.put("param1", "id002");
	} else if ("id005".equals(memberId)) {
		map.put("param2", "id005");
	} else {
		map.put("param3", memberId);
	}
	
	// Gson을 활용하여 json 포맷 방식으로 반환
	String Json = gson.toJson(map);

	// DB에서 조회했다는 가정 하에 처리
	
	// 반환
	out.println(Json);
%>

Heidi 실행 결과

실행 결과 화면 ( 기본 )

실행 결과 화면 ( 중복되지 않는 id를 입력하고 "중복확인" 누른 경우 )

실행 결과 화면 ( 중복되는 id를 입력하고 "중복확인" 누른 경우 )

( 이클립스 콘솔창의 경우, 처음에 중복되지 않는 아이디(id001)를 입력했을 때 찍혔던거 아래에 새로 입력한 중복되는 아이디(id005)에 대한 문구가 출력되는걸 볼 수 있다. )

+ )) 강사님이 원하는 답은 ajaxCallTest.jsp 의 자바코드 부분에서 DB에서 조회했다는 가정 하에 처리하는 부분도 포함되어야하는데, 이 부분은 작성하지 못했다. 강사님이 어떻게 코드 짜셨는지 보고 공부 좀 해야할듯,,,,

* GsonTest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="com.heidi.dto.Member" %>
<%@ page import="java.util.*" %>
<%
	Gson gson = new Gson();

	Member member = new Member();
	member.setAddress("전주");
	member.setAge("21");
	member.setName("홍길동");
	
	/* 인스턴스화 (객체 : member) 를 Gson을 이용해 json 포맷방식 String 타입으로 반환 */
	String getJson = gson.toJson(member);
	out.println(getJson);
	
	List<Member> list = new ArrayList<Member>();
	
	member = new Member();
	member.setAddress("전주");
	member.setAge("21");
	member.setName("홍길동");
	list.add(member);
	
	String getJson2 = gson.toJson(list);
	out.println(getJson2);
	
	// Member 인스턴스화(객체)를 List에 담아서, Gson을 이용해서 json 포맷 방식 String 타입으로 반환
	// com.heidi.dto => Member.java => List
%>

16 :: 멤버객체를 json으로 만들어놓은것 => 결과의 첫 번째 값

(미완성,,,)

'Java . Spring . Web . SQL' 카테고리의 다른 글

2020/09/10 : jqPlot : 바(bar) 차트 (막대 그래프) (0)	2020.09.10
2020/09/10 : jqPlot : 라인 차트 (꺾은선 그래프) (0)	2020.09.10
2020/09/09 : jQuery : Effects (0)	2020.09.09
2020/09/09 : jQuery : 5 (0)	2020.09.09
2020/09/08/jQuery : 4 : Manipulation (0)	2020.09.09

heidish blog

2020/09/09 : jQuery : ajax

기본 설정

코드

* ajax.html

< ajax 에서 다루는 mimetype 종류 >

* ajax_Result.jsp

.js 파일로 처리하기

중복된 아이디인지 아닌지를 Json을 이용해 알아내기

기본 코드

Heidi 답!

* ajaxTest.html

* ajaxCallTest.jsp

Heidi 실행 결과

Recommended Solution

* GsonTest.jsp

'Java . Spring . Web . SQL' 카테고리의 다른 글

댓글

티스토리툴바

2020/09/09 : jQuery : ajax

기본 설정

코드

* ajax.html

< ajax 에서 다루는 mimetype 종류 >

* ajax_Result.jsp

.js 파일로 처리하기

중복된 아이디인지 아닌지를 Json을 이용해 알아내기

기본 코드

Heidi 답!

* ajaxTest.html

* ajaxCallTest.jsp

Heidi 실행 결과

Recommended Solution

* GsonTest.jsp

'Java . Spring . Web . SQL' 카테고리의 다른 글

관련글

댓글

티스토리툴바