다연이네

[days14] json 라이브러리 사용 (json-lib-2.4-jdk15.jar) 본문

JSP

[days14] json 라이브러리 사용 (json-lib-2.4-jdk15.jar)

　다연　 2021. 1. 14. 13:19
반응형
<body>
<p id="demo"></p>

<script>
   var jsObj = { name:"john", today:new Date(), city:"seoul"};
   var json = JSON.stringify(jsObj); // js -> json
   
   $("#demo").html(json);
   //{"name":"john","today":"2021-01-14T03:59:49.185Z","city":"seoul"}
   
</script>
<body>

today:new Date() 날짜 객체가 문자열로 변환되어졌다.

 

<body>
<p id="demo"></p>
<script>
var js = {name:"john", age:function(){return 30}, city:"seoul"};
var json = JSON.stringify(js); // js->json

$("#demo").html(json);
</script>
</body>

(무명)함수를 처리해서 30값으로 출력(변환)되는 것이 아니라 제거된다. 또한, 30이 제거됨과 동시에 age라는 속성명도 제거되었다.

 

위의 코딩을 해결하는 방법

 무명함수를 문자열로 변환시킨 후  json으로 파싱(변환)하는 것이다.

<body>
  <p id="demo"></p>
 <script>
  var js = {name:"john", age:function(){return 30}, city:"seoul"};
  js.age = js.age.toString();
  var json = JSON.stringify(js); // js->json

  $("#demo").html(json);
 </script>
</body>

함수 자체가 문자열로 출력된다.

age: 문자열 함수  "function(){return 30;}" -> eval() 함수 사용하면 다시 함수로 변환할 수 있다.

(기억) 언제한번 쓸 곳이 있을 것

 

 

 

데이터베이스에서 사원 정보를 가져와 json을 사용해 출력하기

 
<%@page import="java.util.Date"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="">
<style>
</style>
<script>
   $(document).ready(function (){   
	   $("#btn1").on("click", function(event) {
		 /*   
	   	  get()         : get -> data (xml일수도 json일수도)
	   	  getJSON() : get -> JSON
	   	  getScript() : get -> js 파일
	   	  post()        : post -> data
	   	  load
	   	   */
	   	   
	   	   //jQuery.ajax() == $.ajax()  옵션 설정에 따라서 get/post    json,xml 
	   	 
	   	   $.ajax({
	   		   url:"ex04_emp_json.jsp"//.jsp 아니라 .do여도 됨 (나중에)
	   		   ,dataType:"json" //text, html, xml, json, jsonp, script
	   		   ,type:"GET" 
	   		   ,cache:false // 잊지말고주자
	   		   ,success: function (data, textStatus, jqXHR) {
	   			   //alert(data.emp); js Array [ {}, {}, ...]
	   			   //alert(data.emp[0].empno +"/"+data.emp[0].ename);
	   			   $(data.emp).each(function (i, element) {
					$("#demo").append("<li>"+element.empno+"/"+element.ename+"</li>");
				})//each
	   		   }//success
	   		   ,error:function(){
	   			   alert("에러");
	   		   }
 	   	   });
	   	   
	   }); //click
   });//ready
</script>
</head>
<body>
<%
  Date now = new Date();
%>

<h3><%=now.toLocaleString() %></h3>

<input type="button" id="btn1" value="jquery ajax + json" />

<p id="demo"></p>

<!-- ex04_emp_json.jsp -->
</body>
</html>

ex04_emp_json.jsp

<%@page import="com.util.JdbcUtil"%>
<%@page import="com.util.ConnectionProvider"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>

<%@ page trimDirectiveWhitespaces="true"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%

   Connection con = null;
   PreparedStatement pstmt = null;
   ResultSet rs = null;
   
   String sql = "select empno, ename, sal "
		            +" from emp "
		            +" order by sal desc";
   //{
	   // "emp" : [] 
  //}
   String jsonData = "{";
   try{
	   con = ConnectionProvider.getConnection();
	   pstmt = con.prepareStatement(sql);
	   rs = pstmt.executeQuery();
	   
	   jsonData += "\"emp\":[";
	   while(rs.next()){
		   int empno = rs.getInt("empno");
		   String ename = rs.getString("ename");
		   //double sal = rs.getDouble("sal");
		   jsonData +="{\"empno\":"+empno+",\"ename\":\""+ename+"\"}";
		   jsonData +=",";
	   }
	   jsonData = jsonData.substring(0, jsonData.length()-1); //마지막 , 없애기
	   jsonData +="]";
	   jsonData +="}";
	   
   }catch(Exception e){
	   e.printStackTrace();
   }finally{
	 	JdbcUtil.close(rs);
	 	JdbcUtil.close(pstmt);
	    JdbcUtil.close(con);
   }

%>
 <%=jsonData%>   <%--텍스트 형태 값으로 응답되어질 것 --%>


<%-- 
{"emp":[
	{"empno":7839,"ename":"KING"},
	{"empno":7902,"ename":"FORD"},
	{"empno":7566,"ename":"JONES"},
	{"empno":7698,"ename":"BLAKE"},
	{"empno":7782,"ename":"CLARK"},
	{"empno":7499,"ename":"ALLEN"},
	{"empno":7844,"ename":"TURNER"},
	{"empno":7934,"ename":"MILLER"},
	{"empno":7654,"ename":"MARTIN"},
	{"empno":7521,"ename":"WARD"},
	{"empno":7900,"ename":"JAMES"},
	{"empno":7369,"ename":"SMITH"}
	]
}
 --%>

 

 

ex04_emp_json.jsp처럼 하지 않고 외부 라이브러리를 사용하면 코딩이 더욱 간편하다.

라이브러리는 

https://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.4/json-lib-2.4-jdk15.jar/download 

를 통해 

WEB-INF > lib 폴더에 추가했다.

 

위 라이브러리를 사용하고자 하면 종속된 클래스가 필요하다.

 

1 jakarta commons-lang 2.5
2 jakarta commons-beanutils 1.8.0
3 jakarta commons-collections 3.2.1
4 jakarta commons-logging 1.1.1
5 ezmorph 1.0.6 

 

위에 보이는 commons-beanutils-1.8.3.jar부터 exmorph-1.0.6.jar까지 추가해줬다. (알집은 sd카드안에 넣어뒀음)

 

이제 

 $.ajax({
	   		   url:"ex04_emp_json_lib.jsp"
	   		   ~~
 	   	   });

이부분만 바꿔주고 

ex04_emp_json_lib.jsp 를 더욱 간단하게 작성할 수 있다. (똑같은 결과 출력)

<%@page import="net.sf.json.JSONArray"%>
<%@page import="net.sf.json.JSONObject"%>
<%@page import="com.util.JdbcUtil"%>
<%@page import="com.util.ConnectionProvider"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>

<%@ page trimDirectiveWhitespaces="true"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
//라이브러리 추가해서 사용
//http://json-lib.sourceforge.net/ 참조
// JSON-lib는 Bean, 맵, 컬렉션, Java 배열 및 XML을 JSON으로 변환하고 
//다시 Bean 및 DynaBean으로 변환하기위한 Java 라이브러리입니다.

// https://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.4/json-lib-2.4-jdk15.jar/download
//WEB-INF > lib 폴더에 추가
//종속된 클래스가 필요하고 
/*
1 jakarta commons-lang 2.5
2 jakarta commons-beanutils 1.8.0
3 jakarta commons-collections 3.2.1
4 jakarta commons-logging 1.1.1
5 ezmorph 1.0.6 
*/

   Connection con = null;
   PreparedStatement pstmt = null;
   ResultSet rs = null;
   
   String sql = "select empno, ename, sal "
		            +" from emp "
		            +" order by sal desc";
   
  JSONObject jsonData = new JSONObject();      // {   } 
  JSONArray jsonEmpArray = new JSONArray(); //  [   ]
  
   try{
	   con = ConnectionProvider.getConnection();
	   pstmt = con.prepareStatement(sql);
	   rs = pstmt.executeQuery();
	   
	   
	   while(rs.next()){
		   int empno = rs.getInt("empno");
		   String ename = rs.getString("ename");
		   double sal = rs.getDouble("sal");
		   
		   JSONObject jsonEmp = new JSONObject();
		   jsonEmp.put("empno",empno);
		   jsonEmp.put("ename",ename);
		   jsonEmp.put("sal",sal);
		   
		   jsonEmpArray.add(jsonEmp);
		   
	   }//while
		   
		   jsonData.put("emp", jsonEmpArray); // {"emp" : [ ] }

	   
   }catch(Exception e){
	   e.printStackTrace();
   }finally{
	 	JdbcUtil.close(rs);
	 	JdbcUtil.close(pstmt);
	    JdbcUtil.close(con);
   }

%>
 
 <%=jsonData%>

<%-- 
{"emp":[
	{"empno":7839,"ename":"KING"},
	{"empno":7902,"ename":"FORD"},
	{"empno":7566,"ename":"JONES"},
	{"empno":7698,"ename":"BLAKE"},
	{"empno":7782,"ename":"CLARK"},
	{"empno":7499,"ename":"ALLEN"},
	{"empno":7844,"ename":"TURNER"},
	{"empno":7934,"ename":"MILLER"},
	{"empno":7654,"ename":"MARTIN"},
	{"empno":7521,"ename":"WARD"},
	{"empno":7900,"ename":"JAMES"},
	{"empno":7369,"ename":"SMITH"}
	]
}
 --%>

 

반응형
저작자표시 비영리

'JSP' 카테고리의 다른 글

[days15] autocomplete  (0) 2021.01.15
[days15] 회원가입 ID 중복체크  (0) 2021.01.15
[days14] JSON 개요  (0) 2021.01.14
[days13] AJAX  (0) 2021.01.13
[days12] 파일을 업로드, 수정, 삭제하는 게시판  (0) 2021.01.12
'JSP' Related Articles more
Comments