AJAX - eclipse

최성현·2023년 8월 2일

XML json json-simple 출력 table

AJAX

목록 보기

5/8

xml/json parsing

xml은 0801 복습

json parsing 다른 방법

이 방법을 하려면 프로젝트 lib에 json-simple-버전.jar를 넣어줘야함

JSONObject 생성

object put으로 값을 하나씩 입력해주고 JSONArray에 넣어줘서 JSON형태의 배열로 만들어줌

JSONArray 생성

json 배열로 만들어 주는 메서드

-object/array 활용법

while(rs.next())
{
	String num=rs.getString("num");
	String sangpum=rs.getString("sangpum");
	String color=rs.getString("color");
	String price=rs.getString("price");
	String imgname=rs.getString("imgname");
			
	/* object put으로 값을 하나씩 입력해주고 JSONArray에 넣어줘서 JSON형태의 배열로 만들어줌 */
	JSONObject ob=new JSONObject();
			
	ob.put("num", num);
	ob.put("sangpum", sangpum);
	ob.put("color", color);
	ob.put("price", price);
	ob.put("imgname", imgname);
			
	//array에 추가
	arr.add(ob);
}

배열형태를 String으로 변환해서 출력

자바코드 닫아주고%>
		
	<%-- 배열형태를 String으로 변환해서 출력 --%>
	<%=arr.toString() %>
		
<% 자바코드 열어주고

table형태 출력

$.ajax({
				
	type:"get",
	url:"ex01_shoptojson.jsp",
	dataType:"json",
	success:function(data){
					
		// table 버전
		s+="<table class='table table-bordered' style='width: 700px'>";
		s+="<tr>";
		s+="<th>번호</th><th>상품</th><th>색상</th><th>가격</th><th>사진</th>";
		s+="</tr>";
					
		$.each(data,function(i,elt){
						
			s+="<tr>"
			s+="<td>"+elt.num+"</td>";
			s+="<td>"+elt.sangpum+"</td>";
			s+="<td>"+elt.color+"<br>"
				+"<div class='box' style='background-color:"+elt.color+"'></td>";
			s+="<td>"+elt.price+"</td>";
			s+="<td><img src='"+elt.imgname+"' width='100'></td>";
			s+="</tr>"
		})
					
		s+="</table>";

myfood table xml parsing

<?xml version="1.0" encoding="UTF-8"?>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<data>
	<%
		DBConnect db=new DBConnect();
		Connection conn=db.getConnection();
		PreparedStatement pstmt=null;
		ResultSet rs=null;
		String sql="select * from myfood order by num";
		
		try{
			pstmt=conn.prepareStatement(sql);
			rs=pstmt.executeQuery();
			
			while(rs.next())
			{
				String num=rs.getString("num");
				String foodname=rs.getString("foodname");
				String foodphoto=rs.getString("foodphoto");
				int price=rs.getInt("price");
				int cnt=rs.getInt("cnt"); 
				
				%>
				<myfood num="<%=num%>">
					<foodname><%=foodname %></foodname>
					<foodphoto><%=foodphoto %></foodphoto>
					<price><%=price %></price>
					<cnt><%=cnt %></cnt>
				</myfood>
				
			<%}
		
		}catch(SQLException e){
			
		}finally{
			db.dbClose(rs, pstmt, conn);
		}
	%>
</data>

shop table json parsing

<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle_db.DBConnect"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%

	DBConnect db=new DBConnect();
	Connection conn=db.getConnection();
	Statement stmt=null;
	ResultSet rs=null;
	
	String sql="select * from shop order by num";
	
	try{
		stmt=conn.createStatement();
		rs=stmt.executeQuery(sql);
		
		/* json 배열로 만들어 주는 메서드 */
		JSONArray arr=new JSONArray();
		
		while(rs.next())
		{
			String num=rs.getString("num");
			String sangpum=rs.getString("sangpum");
			String color=rs.getString("color");
			String price=rs.getString("price");
			String imgname=rs.getString("imgname");
			
			/* object put으로 값을 하나씩 입력해주고 JSONArray에 넣어줘서 JSON형태의 배열로 만들어줌 */
			JSONObject ob=new JSONObject();
			
			ob.put("num", num);
			ob.put("sangpum", sangpum);
			ob.put("color", color);
			ob.put("price", price);
			ob.put("imgname", imgname);
			
			//array에 추가
			arr.add(ob);
		}%>
		
		<%-- 배열형태를 String으로 변환해서 출력해 --%>
		<%=arr.toString() %>
		
	<%}catch(SQLException e){
		
	}
%>

출력 html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
<style>
	.box{
		width: 50px;
		height: 50px;
		border: 2px solid gray;
		border-radius: 100px;
		box-shadow: 3px 3px 3px gray;
	}
</style>
</head>
<body>
	<button type="button" id="btn1" class="btn btn-outline-info">xml읽기(myfood)</button>
	<button type="button" id="btn2" class="btn btn-outline-info">json읽기(myfood)</button>
	<div id="show">출력하는 곳</div>
	
	<script>
		
		$("#btn1").click(function(){
			
			$("#show").empty();
			
			var s="";
			
			$.ajax({
				
				type:"get",
				url:"ex01_myfoodtoxml.jsp",
				dataType:"xml",
				success:function(data){
					
					$(data).find("myfood").each(function(i,ele){
						
						var e=$(ele);
						
						s+="<div class='alert alert-info' style='width: 300px'><br>"
						s+="Num: "+e.attr("num")+"<br>";
						s+="FoodName: "+e.find("myfood").text()+"<br>";
						s+="Foodphoto: <img src='"+e.find("foodphoto").text()+"' width='100'><br>";
						s+="Price: "+e.find("price").text()+"<br>";
						s+="Cnt: "+e.find("cnt").text()+"<br>";
						s+="</div>"
						
					})
					
					$("#show").html(s);
				}
			})
		});
		
		
		$("#btn2").click(function(){
			
			$("#show").empty();
			
			var s="";
			
			$.ajax({
				
				type:"get",
				url:"ex01_shoptojson.jsp",
				dataType:"json",
				success:function(data){
					
					// table 버전
					s+="<table class='table table-bordered' style='width: 700px'>";
					s+="<tr>";
					s+="<th>번호</th><th>상품</th><th>색상</th><th>가격</th><th>사진</th>";
					s+="</tr>";
					
					$.each(data,function(i,elt){
						
						s+="<tr>"
						s+="<td>"+elt.num+"</td>";
						s+="<td>"+elt.sangpum+"</td>";
						s+="<td>"+elt.color+"<br>"
							+"<div class='box' style='background-color:"+elt.color+"'></td>";
						s+="<td>"+elt.price+"</td>";
						s+="<td><img src='"+elt.imgname+"' width='100'></td>";
						s+="</tr>"
					})
					
					s+="</table>";
					
					$("#show").html(s);
				}
			})
		});
		
		
	</script>
</body>
</html>