2019. 4. 3. 11:02ㆍJavaScript
#1 JSON-SIMPLE 다운로드 및 적용
1) google에서 json simple 검색 => 아래 순서대로 적용
#2 DB객체 연동을 위한 구성
1) H2 DB를 사용하므로 드라이버 추가
2) dao, vo => 연동을 위한 java 구성
3) 사용되는 메소드 작성 (MemberDao.java에서의)
|
package dao;
import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import java.util.List;
import org.json.simple.JSONArray; import org.json.simple.JSONObject;
import vo.Member;
public class MemberDao {
private static MemberDao memberDao = new MemberDao();
private MemberDao() { }
public static MemberDao getInstance() { return memberDao; }
//JSONArray로 회원목록 가져오기 public JSONArray getAllMembersJSONArray() { Connection con = null; PreparedStatement pstmt = null; ResultSet rs = null; String sql = ""; JSONArray jsonArray = new JSONArray(); try { con = H2DBUtil.getConnection(); sql = "SELECT * FROM member ORDER BY id"; pstmt = con.prepareStatement(sql); rs = pstmt.executeQuery();
while (rs.next()) { JSONObject jsonObject = new JSONObject(); //Map컬렉션
jsonObject.put("id",rs.getString("id")); jsonObject.put("password",rs.getString("password")); jsonObject.put("name",rs.getString("name")); jsonObject.put("email",rs.getString("email"));
jsonArray.add(jsonObject); } } catch (Exception e) { e.printStackTrace(); } finally { H2DBUtil.closeJDBC(con, pstmt, rs); }
return jsonArray; } // getAllMembersJSONArray()
}
|
#3 jsp 파일에서의 출력
<json.jsp>
|
<%@page import="org.json.simple.JSONArray"%> <%@page import="dao.MemberDao"%> <%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%> <% // DB객체 준비 MemberDao memberDao = MemberDao.getInstance(); JSONArray jsonArray = memberDao.getAllMembersJSONArray(); //out.println(jsonArray); %>
<%=jsonArray %> |
#4 HTML에서의 출력
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JSON DB연동</title> <meta charset="UTF-8"> <script src ="../js/jquery-3.3.1.min.js"></script> <script> <!-- 문서 전체 읽기은 뒤 함수 실행 --> $(document).ready(function(){ $('button').on('click', function(){ $.ajax({ url:'json2.jsp', success: function(result){ console.log(typeof result); console.log(result);
$.each(result,function(index,item){ var str = item.id + ":" +item.password + ":"+ item.name; $('ul').append('
');
}); } }); }); });
</script> </head> <body> <button type="button">시작</button> <ul> </ul> </body> </html> |
'JavaScript' 카테고리의 다른 글
| DB연동이 된 Chart(표) 사용하기 [막대그래프,ColumnChart] (0) | 2019.04.03 |
|---|---|
| Chart(표) 사용하기 [막대그래프,ColumnChart] (0) | 2019.04.03 |
| jQuery 적용하기 (0) | 2019.03.27 |
| Script 기본 사용법 (2) (0) | 2019.03.27 |
| Script 기본 사용법(1) (0) | 2019.03.27 |