[jQuery] 22장 jQuery를 이용한 Ajax

jQuery를 이용한 Ajax

Eclipse를 사용하며 프로젝트를 진행한다.

방법	뜻
type	데이터를 전송하는 방법을 지정한다. (“GET”, “POST”)
data	서버로 데이터를 전송할 때 사용한다.
success	성공했을 때 호출할 콜 백을 지정한다. ex) function( PlainObject result, String textStatus, jqXHR )
error	실패했을 때 호출할 콜 백을 지정한다 ex) function(jqXHR xhr, String status, String error)
datatype	서버 측에서 전송한 응답 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. ex) xml, json, script, html

jQueryAJAX.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
	//jQuery AJAX
	$.ajax({
		url : 'dummy.txt',
		type : 'get', // method속성도 활용가능, get방식일때 생략가능
// 		data : , // 요청 보낼 정보가 없을 때는 생략 가능
		success : function(rst) {
			console.log("응답 결과 >> ", rst);
		},
		error : function(xhr) { // xmlhttpsrequest
			alert("에러 상태 : " + xhr.status)
		},
// 		dataType : 'text' // 생략 가능하며, 응답데이터의 형식에 맞춰 자동 설정됨
	})

</script>

단축 메뉴 형식 사용

위치

ajax.json, ajax.xml, dummy.txt 파일

get 방식 : $.get()

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
	// 단축메뉴
	// $.get(url, data, success, dataType)
	// $.post(url, data, success, dataType)
	// $.getJSON(url, data, success)

	$.get('sample/ajax.json', function(data){console.log(data)});
</script>

post 방식 : $.post()

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
	// 단축메뉴
	// $.get(url, data, success, dataType)
	// $.post(url, data, success, dataType)
	// $.getJSON(url, data, success)
    
	$.post('sample/ajax.xml', function(data){console.log(data)});
</script>

$.getJSON()

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
	// 단축메뉴
	// $.get(url, data, success, dataType)
	// $.post(url, data, success, dataType)
	// $.getJSON(url, data, success)

	$.getJSON('sample/ajax.json', function(rst){console.log(rst)})

</script>

단축 메소드 : load()

: 서버와 통신하여 데이터를 가져오는 메소드로 ajax()보다 간소화된 비동기 호출 메소드
불필요한 리소스를 줄이고 코드를 간결하게 함

ex) $(selector).load(url, data, callback)

+JDBC로 DB정보 얻기

1. 연결할 DB가 설치되어야 함
2. 자바와 DB를 연결하기 위한 라이브러리 필요 ojdbc.jar
3. Class.forName("JDBC Driver명")을 이용해 드라이버 로딩
4. DriverManager를 통해 Connection객체 생성
5. SQL구문 실행을 위한 Statement객체 생성

- 사용 방법

$(selector).load(URL, data, callback);

load.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
  border: 1px solid;
  width: 50%;
  height: 10vh;
}
</style>
</head>
<body>

	<input id="userId">
	<input type="password" id="userPw">
	<button>버튼</button>
	
	<div id="d1"></div>
	<div id="d2"></div>
	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>

	$('button').on('click', function() {
		
/* 
	load() : 서버로부터 응답받은 데이터를 선택한 html요소 콘텐츠로 대체
		서버와 통신하여 데이터를 가져오는 메소드로 ajax()보다 간소화된 비동기 호출 메소드
		불필요한 리소스를 줄이고 코드를 간결하게 함
		
		$(selector).load(url, data, callback)
*/
		let $uId = $('#userId').val();
		let $uPw = $('#userPw').val();
		
		$('#d1').load('loadTest.jsp', {uId:$uId, uPw:$uPw}, f_cb);
		
	});
	
	// a - 성공시 결과 전달, b - 호출상태문자(statusText), c - xhr객체(로 속성접근가능)
	function f_cb(a,b,c) {
// 		alert( JSON.parse(a).rst ); // ok 또는 false
		let data = JSON.parse(a).rst;
		if(data == "ok") {
			$('#d2').text("회원 정보로 로그인 " + data).css('color', 'green');
		} else {
			$('#d2').text("회원 정보로 로그인 " + data).css('color', 'red');
		}
		alert(b); // success
		alert(c.statusText); // success
	}

</script>
</body>
</html>

loadTest.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String uId = request.getParameter("uId");
	String uPw = request.getParameter("uPw");
	System.out.println("이클립스 콘솔상에서 확인해주세요. >> " + uId);

	Class.forName("oracle.jdbc.driver.OracleDriver");
	String url = "jdbc:oracle:thin:@localhost:1521:xe";
	Connection conn = DriverManager.getConnection(url, "pc10", "java");
	Statement stmt = conn.createStatement();
	
	String sql = "select mem_id from member "
				+ "where mem_id = '" + uId
				+ "' and mem_pass = '" + uPw + "'";
	ResultSet rs = stmt.executeQuery(sql);
	
	if(rs.next()) {
		// 정보 있는 응답 데이터 생성
%>
		{"rst" : "ok"}
<%
	} else {
		// 정보 있는 응답 데이터 생성
%>
		{"rst" : "fail"}
<%
	} // if end
%>

'jQuery' 카테고리의 다른 글

[jQuery] 23장 fetch (0)	2024.03.04
[jQuery] 21장 Ajax를 이용한 페이지 예제 (0)	2024.02.28
[jQuery] 20장 Ajax (0)	2024.02.27
[jQuery] 19장 JSON (1)	2024.02.27
[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기 (1)	2024.02.27

'jQuery' 카테고리의 다른 글

티스토리툴바