갈림길 이정표

[jQuery] Ajax를 이용하여 (DB) XML 파일 처리 본문

Programming Language/Javacript & jQuery

[jQuery] Ajax를 이용하여 (DB) XML 파일 처리

이몽뇽 2020. 8. 19. 15:29

jq폴더 > jqex7_xml_maria.html

[jqex7_xml_maria.html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../js/jqex7.js"></script>
</head>
<body>
<h3>jQuery(Ajax - XML)로 상품 자료 처리</h3>
<button id="all">전체 자료</button> &nbsp;&nbsp;&nbsp;
상품명: <input id="name" type="text">
<button id="search">검색</button>
<br><br>
<div id="table"></div>
건수: <span id="count"></span>
</body>
</html>

js폴더 > jqex7.js

[jqex7.js]

$(document).ready(function(){
	$("#all").click(function(){
		$("#table").empty();
		$("#count").empty();
		
		$.ajax({
			type:"get",
			url:"jqex7_xml_maria.jsp",	//요청
			data:{"para":"all"},
			dataType:"xml",
			success:function(data){
				//alert(data);			/*[object XMLDocument]*/
				var count = 0;
				var str = "<table border='1'>";
				str += "<tr><th>코드</th><th>상품명</th><th>수량</th><th>단가</th></tr>";	//<tr>: 테이블 row 삽입할거임
							//<th>: 테이블의 정보열 (1열) - 굵은 글씨, 가운데 정렬
				
				$(data).find("sangpum").each(function(){	//each(): 데이터 갯수만큼 반복
					str += "<tr><td>" + $(this).find("code").text() + "</td>";			//<td>: 테이블  데이터 입력
					str += "<td>" + $(this).find("sang").text() + "</td>";
					str += "<td>" + $(this).find("su").text() + "</td>";
					str += "<td>" + $(this).find("dan").text() + "</td></tr>";
					count++;
				});
				$("#table").append(str);
				$("#count").append(count);
			},
			error:function(){
				$("#table").text("에러발생");
			}
			
		});
	});
	$("#search").click(function(){
		$("#table").empty();
		$("#count").empty();
		var name = $("#name").val(); //text() X
		if(name === ""){
			alert("상품명 입력!")
			return;
		}
		
		$.ajax({
			type:"get",
			url:"jqex7_xml_maria.jsp",	//요청
			data:{"para":"search", "name":name}, //값을 두개 넘겨야 함
			dataType:"xml",
			success:function(data){
				//alert(data);			/*[object XMLDocument]*/
				var count = 0;
				var str = "<table border='1'>";
				str += "<tr><th>코드</th><th>상품명</th><th>수량</th><th>단가</th></tr>";	//<tr>: 테이블 row 삽입할거임
							//<th>: 테이블의 정보열 (1열) - 굵은 글씨, 가운데 정렬
				
				$(data).find("sangpum").each(function(){	//each(): 데이터 갯수만큼 반복
					str += "<tr><td>" + $(this).find("code").text() + "</td>";			//<td>: 테이블  데이터 입력
					str += "<td>" + $(this).find("sang").text() + "</td>";
					str += "<td>" + $(this).find("su").text() + "</td>";
					str += "<td>" + $(this).find("dan").text() + "</td></tr>";
					count++;
				});
				$("#table").append(str);
				$("#count").append(count);
			},
			error:function(){
				$("#table").text("에러발생");
			}
			
		});
	});
});

jq폴더 > jqex7_xml_maria.jsp

[jqex7_xml_maria.jsp]

<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"
%>
<%@ page import="java.sql.*"%>
<sangpums>

<%
request.setCharacterEncoding("utf-8");		//한글 읽을 수 있게 한 이유는 넘어오는 상품명이 한글이기 때문
String para = request.getParameter("para");	//all || search 가 넘어 올것임
String name = request.getParameter("name");	//'상품명' 일부가 넘어 올 것임

Connection conn = null;		//jsp 파일로 감싸져 있음 (다시 말해 보이지 않는(서비스)메소드 안에 있으므로 지역변수 임.)
PreparedStatement pstmt = null;
ResultSet rs = null;

try{
	Class.forName("org.mariadb.jdbc.Driver");
	
	conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","369369");
	
	if(para.equals("all")){	//전체 자료
		pstmt = conn.prepareStatement("SELECT * FROM sangdata");
	}else{	//부분 자료
		pstmt = conn.prepareStatement("SELECT * FROM sangdata WHERE sang like ?");
		pstmt.setString(1, "%" + name + "%");
	}
	
	rs = pstmt.executeQuery();
	
	while(rs.next()){
%>
	<sangpum>
		<code><%=rs.getString("code") %></code>	<!-- rs.getString(1) -->
		<sang><%=rs.getString("sang") %></sang> <!-- rs.getString(2) -->
		<su><%=rs.getString("su") %> </su> <!-- rs.getString(3) -->
		<dan><%=rs.getString("dan") %></dan> <!-- rs.getString(4) -->
	</sangpum>
<%
	}
}catch (Exception e){
	System.out.print("err: " + e);
}finally{
	try{
		if(rs != null) rs.close();
		if(pstmt != null) pstmt.close();
		if(conn != null) conn.close();
	}catch (Exception e){
		
	}
}
%>
</sangpums>

'Programming Language > Javacript & jQuery' 카테고리의 다른 글

[jQuery] jQuery에서 제공하는 UI 적용하기  (0) 2020.08.19
[jQuery] Ajax를 이용하여 (DB )JSON 파일 처리  (0) 2020.08.19
Ajax 이용시 jsp 파일 형식  (0) 2020.08.19
[jQuery] Ajax 처리 함수  (0) 2020.08.19
[jQuery] jQuery로 Ajax 작업하기  (0) 2020.08.19
'Programming Language/Javacript & jQuery' Related Articles more
Comments