[JQuery] 세팅 및 jQuery & Ajax를 이용한 텍스트 데이터 전송

2022.03.15(56일 차_화요일)

이번에는 jQuery & Ajax를 이용해서 텍스트 데이터 전송에 관한 예제를 정리할 것이다.

jQuery 란?

자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 자바스크립트 라이브러리이다.

DOM(문서 객체 모델)과 이벤트에 관한 처리를 손쉽게 해 주고, Ajax 응용 프로그램 및 플러그인도 활용 가능해진다

jQuery 설치 및 세팅

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

위의 경로에서 jQuery를 설치해서 이클립스 lib(라이브러리)에 추가해주면 된다.

나는 Webcontent폴더 -> data -> 안에 css, js폴더를 만들어서 넣어줬다.

이제 사용할 JSP 페이지에 <script> 태그를 사용해서 src에 경로를 작성하면 사용할 수 있다.

ex) <script type="text/javascript" src="<%=cp%>/data/js/jquery-3.1.1.min.js"></script>

XMLHttpRequest 객체 생성

XMLHttpRequest는 이전 글에서도 한번 다룬 내용인데 브라우저마다 객체 생성하는 방법이 다르다.


javascript
var xmlHttp;
 
function createXMLHttpRequest(){
	
	var xmlReq = false;
	
	if(window.XMLHttpRequest){//Non-Microsoft browser
		
		xmlReq = new XMLHttpRequest; //객체생성방법
		
	}else if(window.ActiveXObject){//Microsoft browser
		
		try {//버전 5.0이후
			xmlReq = new ActiveXObject("Msxml2.XMLHTTP");			
		} catch (e) {//버전 5.0이전
			xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
		}
		
	}
	
	return xmlReq;
	
}

데이터 전송 방법 - (Javascript 사용 예제)

Javascript를 이용해서 데이터를 보내는 예제이다.
test 1.jsp 에서 test 1_ok.jsp로 데이터를 보냈다가 다시 test 1.jsp로 데이터를 받아 출력

test1.jsp - (출력 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	//test1,test1_ok는 js로 데이터를 받는방법.
	
	//데이터를 받는방법은 js / js + jquery / jquery 3가지 방법이 있음
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="<%=cp%>/data/js/ajaxUtil.js"></script>
 
<script type="text/javascript">
 
	function sendIt() {
		
		//XMLHttpRequest 객체 생성을 하는 메서드를 모듈화하여 사용
		xmlHttp = createXMLHttpRequest(); //시작할때 0번
		
		var query = "";
		var su1 = document.getElementById("su1").value;
		var su2 = document.getElementById("su2").value;
		var oper = document.getElementById("oper").value; //3개의 값을 받고
		
		//get 방식 데이터 전송 - 주소를 만들어주고
		query = "test1_ok.jsp?su1=" + su1 + "&su2=" + su2 + "&oper=" + oper;
		
		//이름은 사용자 정의
		//onreadystatechage 메서드
		//서버가 작업을 마치고 클라이언트에게 정보를 돌려줄 때 자동으로 실행할 메서드를 지정
		xmlHttp.onreadystatechange = callback; //callback 함수 밑에 정의
		
		//open(); : 주소를 보내기위해 하는 준비작업
		xmlHttp.open("GET",query,true);// 1번   /get방식으로 query를 보내고 true를 준다 / post방식일때는 false
									   //get방식으로 보낼것인데 쿼리를 위 주소로 보내고 true(비동기방식)값 줌
		
		//send(); : 보내는 명령어
		//POST방식으로 전송 시 send에 전송해야하는 데이터값을 파라미터로 넣어준다.
		xmlHttp.send(null); // 2번 비동기 방식으로 보낸다.
		
		//3번은 서버에서 실행되고 될때마다 3번을 보내주고 다 되면 4번을 보내준다
		
	}
	//데이터를 처리해서 받는데가 콜백
	//콜백함수 : 서버에 던져서 돌아오면 무조건 멧드를 받아야됨.문법적으로 콜백함수라고함
	function callback() {
		
		if(xmlHttp.readyState==4){ //서버 작업이 완료되면 4
			if(xmlHttp.status==200) { //작업이 정상적으로 됬으면 200 아니면 404
				
				printData();
				
			}
		}
		
	}
	
	function printData() {
		//넘어오는 xml파일의 "root"를 읽어내서 result에 담는다.
		var result = xmlHttp.responseXML.getElementsByTagName("root")[0];
		//돌려주는 데이터가 xml이다.xml받을 준비를 해놓음
		
		//resultDIV에 뿌릴려면 객체화 시켜야한다
		var out = document.getElementById("resultDIV");
		
		out.innerHTML ="";
		out.style.display =""; //이미 한번 실행이 됬다면 null로 초기화(실행할때마다 초기화)
		
		var value = result.firstChild.nodeValue; //root 안의 첫번째 차일드의 값 sum을 잃어서 value에 넣음
		
		out.innerHTML = value; //value 값을 HTML화 시켜서 출력한다.
		
	}
 
 
 
</script>
 
</head>
<body>
 
<input type="text" id="su1"/>
<select id="oper">
	<option  value="hap">더하기</option>
	<option  value="sub">빼기</option>
	<option  value="mul">곱하기</option>
	<option  value="div">나누기</option>
</select>
<input type="text" id="su2"/>
<input type="button" value=" = " onclick="sendIt();"/>
 
<div id="resultDIV" style="display: none;"></div> <!-- 여기에 데이터 뿌림 -->
 
</body>
</html>

test 1_ok.jsp - (model를 받아 처리 후 반환해주는 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	int su1 = Integer.parseInt(request.getParameter("su1"));
	int su2 = Integer.parseInt(request.getParameter("su2"));
	String oper = request.getParameter("oper");
	
	int sum = 0;
	
	if(oper.equals("hap"))
		sum = su1 + su2;
	else if(oper.equals("sub"))
		sum = su1 - su2;
	else if(oper.equals("mul"))
		sum = su1 * su2;
	else if(oper.equals("div"))
		sum = su1 / su2;
	
	//결과를 돌려주기 위해서 XML을 만들어서 데이터를 넣어 보낸다(반환).
	StringBuffer sb = new StringBuffer();
	
	//넘어오는 데이터
	sb.append("<?xml version='1.0' encoding='utf-8'?>\n");//누적
	sb.append("<root>" + sum + "</root>"); //root태그에 묶인 sum값을 test1으로 보낸다
 
	//만든 XML을 클라이언트한테 돌려준다 / 클라이언트에게 response
	response.setContentType("text/xml;charset=utf-8");
	response.getWriter().write(sb.toString()); //sb에 있는 toString으로 바꿔서 writer를 써서 데이터를 보낸다.
											   //보낸 데이터는 콜백함수가 실행되면서 받는다.
	
%>

데이터 전송 방법 - (Ajax + jQuery사용 예제)

Ajax + jQuery를 이용해서 데이터를 보내는 예제
test2.jsp에서 test2_ok.jsp로 데이터를 보내고, test2_ok.jsp에서 받은 데이터 + 여기에 있는 데이터를 XML형태로 다시 보내고, test2.jsp는 이걸 받을 때 parsing 작업을 함

test2.jsp - (출력 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//여기선 js + jquery의 ajax로 데이터 보내는 방법
	// Ajax & jQuery 를 사용해서 데이터 보내는 방법
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="<%=cp%>/data/js/jquery-3.1.1.min.js"></script>
 
<!-- 데이터를 보내는 곳 -->
<script type="text/javascript">
 
	$(function(){
		
		$("#sendButton").click(function () {
			
			var params = "subject=" + $("#subject").val() + "&content=" + $("#content").val();
			
			$.ajax({
				
				//jquery는 post방식으로 거의 보낸다
				
				type:"POST",//전송방식
				url:"test2_ok.jsp",//주소
				data:params,//전송 데이터
				dateType:"xml", //돌아오는 데이터 타입(반환값)은 xml
				//갔다가 돌아왔을 때(성공) 실행하는 함수 - (돌아올때는xml데이터가 와서 받아줘야함)
				success:function(args) {
					
					//xml에서 데이터 읽기(parsing 작업 필요)
					$(args).find("status").each(function() { //status해당태그 검색,each는 반복작업명령어 
						
						alert($(this).text());//
					});
					
					var str = "";
					//each로 반복작업명령
					$(args).find("record").each(function() {
						
						//id는 속성이라 attr로 씀
						var id = $(this).attr("id");//레코드에 있는 속성 아이디를 찾아라
						var subject = $(this).find("subject").text(); //subject의 텍스트를 찾아라
						var content = $(this).find("content").text();
						
						str += "id=" + id + 
									",subject=" + subject +
									",content=" + content + "<br/>";
						
					});
					
					$("#resultDIV").html(str);//str를 넣어라
					
					
				},
				//showRequest는 사용자 정의 
				beforeSend:showRequest, //데이터를 보내기전에 무언가를 하는 함수(보내기전에 입력여부 체크)
				//갔다가 돌아왔을 때(실패) 실행하는 함수
				error:function(e) {
					alert(e.responseText);//에러메세지 텍스트로 띄우기
				}
				
			});
			
 
			
		});
		
	});
	
	//가기 전에 해야하는 작업
	function showRequest() {
		
		var flag = true;
		
		if(!$("#subject").val()) {//subject에 value가 없으면
			alert("제목을 입력하세요!");
			$("#subject").focus();
			return false; //false값을 반환하면 실행하지 않는다. true가 와야 실행	
		}
		
		if(!$("#content").val()) {//subject에 value가 없으면
			alert("내용을 입력하세요!");
			$("#content").focus();
			return false; //false값을 반환하면 실행하지 않는다. true가 와야 실행	
		}
		
		return flag; //flag 안에 true값이 들어가있다 그래서 flag를 반환하면서 실행
					 //true가 return되어야만 sendButton이 클릭되었을 때 함수가 돌아간다.
		
	}
	
	
 
</script>
 
</head>
<body>
 
제목: <input type="text" id="subject"/><br/>
내용: <input type="text" id="content"/><br/>
<input type="button" id="sendButton" value="보내기"/><br/>
 
<div id="resultDIV"></div> <!-- 여기에 데이터 뿌림 -->
 
</body>
</html>

test2_ok.jsp - (서버의 요청을 받아 응답하는 페이지)


html
<%@ page contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//넘어오는 값 받는다
	String subject = request.getParameter("subject");
	String content = request.getParameter("content");
	
%>
 
<!-- 받아낸 값을 xml자체를 넘겨준다 -->
 
<root>
	<status>권장도서</status>
	<record id="1">
		<subject><%=subject%></subject>
		<content><%=content%></content>
	</record>
	<record id="2">
		<subject>도깨비</subject>
		<content>유인나</content>
	</record>
</root>

데이터 전송 방법 - (jQuery사용 예제)

jQuery를 이용해서 데이터를 보내는 예제
test 3.jsp에서 test 3_ok.jsp로 데이터를 Post 방식으로 보냈다가 다시 받을 땐 파라미터 값을 받아옴

test 3.jsp - (데이터 출력 페이지-post방식 )


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//여기선 jquery로 데이터 넘기는 방법
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function () { //ready는 DOM이 생성되면 실행
	
	$("#saveButton").click(function () {
		
		//값을 읽어낸다
		var value1 = $("#userId").val();
		var value2 = $("#userPwd").val();
		
		//post방식으로 보냄
		//test_ok.jsp, {userId:value1, userPwd:value2} 보내고,  function(args) 콜백함수
		$.post("test3_ok.jsp", {userId:value1, userPwd:value2}, function (args) {
			
			$("#resultDIV").html(args); //html형태로 args를 뿌려준다.
			
		});
		
	});
	// 지우기 버튼 눌렀을 때
	$("#clearButton").click(function () {
		$("#resultDIV").empty();
	});
	
});
 
</script>
 
</head>
<body>
 
아이디: <input type="text" id="userId"/><br/>
패스워드: <input type="text" id="userPwd"/><br/>
 
<button id="saveButton">전송</button>
<button id="clearButton">지우기</button>
 
<br/><br/>
 
<div id="resultDIV"></div> <!-- 여기에서 데이터 출력 -->
 
</body>
</html>

test 3_ok.jsp - (파라미터 값을 받아오는 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
	
%>
 
아이디: <%=userId%><br/>
패스워드: <%=userPwd%><br/>

데이터 전송 방법 - (Ajax + jQuery사용 예제)

Ajax + jQuery를 이용해서 데이터를 보내는 예제
데이터를 get방식으로 보냈다가 파라미터 값을 받아온다.

test4.jsp - (데이터 출력 페이지 - Post방식)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	//js + ajax로 데이터
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function () {
	
	$("#saveButton").click(function () {
		
		var params = "userId=" + $("#userId").val() +
					"&userPwd=" + $("#userPwd").val();
		
		$.ajax({
			
			type:"POST",
			url:"test4_ok.jsp",
			data:params,
			success:function(args) {
				$("#resultDIV").html(args);
			},
			beforeSend:showRequest,
			error:function(e) {
				alert(e.responseText); // responseText : 서버응답내용을 나타내는 문자열
			}
		});
			
		
	});
	//함수이름은 사용자 정의
	function showRequest() {
		
		var flag = true;
		
		if(!$("#userId").val()) {
			alert("아이디 입력하세요!");
			$("#userId").focus();
			return false;
		}
		
		if(!$("#userPwd").val()) {
			alert("패스워드 입력하세요!");
			$("#userPwd").focus();
			return false;
		}
		
		return flag;
	}
	
	
	$("#clearButton").click(function () {
		$("#resultDIV").empty();
	});
	
});
 
</script>
 
</head>
<body>
 
아이디: <input type="text" id="userId"/><br/>
패스워드: <input type="text" id="userPwd"/><br/>
 
<button id="saveButton">전송</button>
<button id="clearButton">지우기</button>
 
<br/><br/>
 
<div id="resultDIV"></div> <!-- 여기에서 데이터 출력 -->
 
</body>
</html>

test4_ok.jsp - (파라미터값을 받아오는 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
	
%>
 
아이디: <%=userId%><br/>
패스워드: <%=userPwd%><br/>

jQuery + Ajax를 이용하여 JSON 형태의 데이터 전송

JSON는 Map방식으로 <Key, Value> 형태로 데이터가 저장된다.

test5.jsp- (데이터 출력 페이지)


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<title>Insert title here</title>
 
<script type="text/javascript">
 
// JSON : 구조화된 텍스트 데이터의 교환을 위한 자바스크립트 표현식
/* json 형식으로 값을 받는 방법이다.  */
	$(function() { //$(document).ready(function ()를 생략해서 이렇게 쓸 수 있음
	
		$("#sendButton").click(function(){
			
			var params = "userId=" + $("#userId").val() +
					"&userPwd=" + $("#userPwd").val();
			
			$.ajax({
			
				type:"POST",
				url:"test5_ok.jsp",
				data:params,
				dataType:"json", // 돌아오는 타입이 json형태
				
				
				success:function(args) { // 성공하면 args에 데이터가 들어옴
				
					var str = "";
				/* 모양을 만듬 */
					for(var i=0; i<args.length;i++) {
						
						str += "id=" + args[i].id;
						str += ",userId=" + args[i].userId;
						str += ",userPwd=" + args[i].userPwd + "<br/>";
						
					}
					
					// 반복문을 통해 어이다가 출력할것인가
					$("#resultDIV").html(str);
					
				},
				// 에러일때 
				error:function(e) {
					alert(e.responseTest);
				}
			});
		});
	});
 
</script>
 
</head>
<body>
	아이디: <input type="text" id="userId"/><br/>
	패스워드: <input type="text" id="userPwd"/><br/>
	
	<!-- button이란 태그는 submit기능을 가지고 있다.  -->
	<button id="sendButton">전송</button>
	<br/><br/>
	
	<div id="resultDIV"></div>
</body>
</html>

test5_ok.jsp


html
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%
	request.setCharacterEncoding("UTF-8");
	String cp = request.getContextPath();
	
	
	String userId = request.getParameter("userId");
	String userPwd = request.getParameter("userPwd");
	
	
	String result = "";
	
	for(int i=1;i<=3;i++){ // 데이터는 여러개다를 표현
		
		result += "{\"id\":\"" + i;  // \" 앞과 id뒤 \" 짝  \" 는 " 이됨 
		result += "\",\"userId\":\"" + userId;
		result += "\",\"userPwd\":\"" + userPwd + "\"},";
		
		
		// json형태의 데이터 
		// [
		//  key : value
		// {"id:"1","userId":"suzi","userPwd":"123"}, 똑같은 데이터를 여러개
		// {"id:"1","userId":"suzi","userPwd":"123"}, 똑같은 데이터를 여러개
		// {"id:"1","userId":"suzi","userPwd":"123"},  똑같은 데이터를 여러개
		// ]
	}
	
	
	result = result.substring(0,result.length()-1); // 마지막 , 를 뺌
	result = "[" + result + "]"; // 대괄호가 묶인 데이터가 나옴
	
	out.print(result); 
%>

이번에 생소한 jQuery + Ajax에 대해 배워서 많이 어려웠다. JS 또한 아직 익숙하지가 않아 좀 더 복습해봐야겠다.

저작자표시 비영리

블로그의 정보

무작정 개발

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역