갈림길 이정표

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

Programming Language/Javacript & jQuery

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

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

jq폴더 > jqex8_json_maria.html

 

[jqex8_json_maria.html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- jqueryui.com 에서 제공하는 기능 link로 받아오기 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../js/jqex8.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	//$("#dialog").dialog();	//dialog창으로 출력
	
	$("#d").datepicker({
		dateFormat:'yy년 mm월 dd일',
		numberOfMonths:2	//defualt = 1 (1개의 월 달력), 2 (2개 달력 함께 출력)
	});
});

</script>
</head>
<body>
<h3>jQuery(Ajax - JSON)로 고객 자료 처리</h3>
부서명: <input type="text" id="buser_name">	<!-- ajax는 <form> tag 쓸 필요 없음! -->
<button id="btnOk">확인</button>
<br><br>
<div id="disp1"></div>
<div id="disp2"></div>

</body>
</html>
[jqex8.js]

$(document).ready(function(){	//서버로 부터 (이미지나 사운드 등을 뺀) text 로딩이 완료되면
	$("#btnOk").click(function(){
		$("#disp1").empty();
		$("#disp2").empty();
		var buser_name = $("#buser_name").val();
		if(buser_name === ""){
			alert("부서명 입력!");
			$("#buser_name").focus();
			return;
		}
		
		//alert(buser_name);
		$.ajax({
			type:"get",
			url:"jqex8_json_maria.jsp",
			data:{"buser_name":buser_name},
			dataType:"json",
			success:function(data){
				//alert(data);	/* [object Object] */
				var str = "";
				var count = 0;	//ECMA6에선 let이라 해도 됨
				str = "<table border='1'>";
				str += "<tr><th>고객번호</th><th>고객명</th><th>고객전화</th></tr>";
				$.each(data, function(index, entry){	//들어올 값 두개 (키, 값)
					str += "<tr>"
					str += "<td>" + entry.gogek_no + "</td>";
					//result += "\"gogek_no\":" + "\"" + rs.getString("gogek_no") + "\","; 중에서 앞에 있는 gogek_no 임
					str += "<td>" + entry.gogek_name + "</td>";
					str += "<td>" + entry.gogek_tel + "</td>";
								// =entry["gogek_tel"]
					str += "</tr>"
					count++;
				})
				
				str += "</table>";
				
				$("#disp1").append(str);
				$("#disp2").append("인원 수 : " + count + "명");
			},
			error: function(){
				$("#disp1").text("에러");				
			}
		});
	});
});
[jqex8_json_maria.jsp]

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"
    import="java.sql.*"
%>
[
<%
request.setCharacterEncoding("utf-8");
String buser_name = request.getParameter("buser_name");
//System.out.println(buser_name); ->개발할 때 확인 용 (디버깅 용)


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

try{
	Class.forName("org.mariadb.jdbc.Driver");
	
	conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","369369");
	
	/*String sql = "SELECT gogek_no,gogek_name,gogek_tel FROM gogek" +	
			" INNER JOIN jikwon on gogek_damsano=jikwon_no" +		//" 앞 띄어쓰기 주의 
			" INNER JOIN buser on buser_no = buser_num WHERE buser_name=?;\";*/
	
	StringBuffer sb = new StringBuffer();	//자바에선 String 문자열 더하기 안좋아함 (성능 저하)
	//대신 StringBuffer나 StringBuilder씀
	sb.append("SELECT gogek_no,gogek_name,gogek_tel FROM gogek");
	sb.append(" INNER JOIN jikwon ON gogek_damsano=jikwon_no");	//띄어쓰기 주의
	sb.append(" INNER JOIN buser ON buser_no = buser_num WHERE buser_name=?");	//; 없음
	//System.out.println(sb.toString()); (확인용)
	
	/*pstmt = conn.prepareStatement(sql);*/
	pstmt = conn.prepareStatement(sb.toString());
	pstmt.setString(1, buser_name);	//'' 없음
	rs = pstmt.executeQuery();
	
	while(rs.next()){
		result += "{";
		result += "\"gogek_no\":" + "\"" + rs.getString("gogek_no") + "\",";
		result += "\"gogek_name\":" + "\"" + rs.getString("gogek_name") + "\",";
		result += "\"gogek_tel\":" + "\"" + rs.getString("gogek_tel") + "\"";
		result += "},";
	}
	if(result.length() > 0){
		result = result.substring(0, result.length() -1);
	}
	//System.out.println(result);	//println():한줄 씩 출력 ≠ print(): 한줄로 출력
	out.print(result); /*XML 에서는 <\%\%\> 이걸로 밖깥 출력 했다하면  JSON은 out.print 로 해줘야함*/
	
}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){
		
	}
}
%>
]

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

[jQuery] jQuery에서 제공하는 UI 적용하기  (0) 2020.08.19
[jQuery] Ajax를 이용하여 (DB) XML 파일 처리  (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