13.2.2 JSP 와 JSON

AJAX 요청으로 DB 값 JSON으로 가저오기

makeJson.jsp

<%@page import="com.google.gson.JsonArray"%>
<%@page import="com.google.gson.JsonObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
JsonObject jsonObject = new JsonObject();
jsonObject.addProperty("id", "hong");
jsonObject.addProperty("pw", "1234");
JsonObject jsonObject2 = new JsonObject();
jsonObject2.addProperty("id", "admin");
jsonObject2.addProperty("pw", "1111");
JsonArray jsonArray = new JsonArray();
jsonArray.add(jsonObject);
jsonArray.add(jsonObject2);

out.print(jsonArray.toString());
%>

jsonTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        getJson();

        $('#target').click(function() {
            getJson();
            return false;
        });

        function getJson() {
            $.getJSON('makeJson.jsp', function(data) {
                var html = "";
                for(var i in data){
                    //console.log(data[i]["id"]);
                }

                $.each(data, function (key, val) {
                    //console.log(key, val);
                    //console.log(val["id"], val["pw"]);
                    html += ("<li>" + val["id"] + ":" + val["pw"] + "</li>");
                });
                $('#content').html(html);

            });
        }
    });
</script>

</head>
<body>
    <h1>새로 고침 : <input type="button" id="target" value="reload"></h1>
    <ul id="content">

    </ul>


</body>
</html>

13.2.3 USERS에 적용

main 페이지 User Count 넣기

UserDAO.java

private final String USER_COUNT = "select count(id) as count from users where role=?";

// USER_COUNT
public int getUserCount(String role) {
    System.out.println("getUserNum()");
    int count = 0;
    try {
        conn = JDBCUtil.getConnection();
        stmt = conn.prepareStatement(USER_COUNT);
        stmt.setString(1, role);
        rs = stmt.executeQuery();
        if(rs.next()) {
            count = rs.getInt("count");
        }

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        JDBCUtil.close(rs, stmt, conn);
    }
    return count;
}

getUserCount.jsp

<%@page import="users.dao.UserDAO"%>
<%@page import="com.google.gson.JsonArray"%>
<%@page import="com.google.gson.JsonObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%

int count = 0;
UserDAO dao = new UserDAO();
JsonObject jsonObject = new JsonObject();

count = dao.getUserCount("User");
jsonObject.addProperty("user", count);

count = dao.getUserCount("Admin");
jsonObject.addProperty("admin", count);

out.print(jsonObject.toString());
%>

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Main - 메인</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        getJson();

        $('#target').click(function() {
            getJson();
            return false;
        });

        function getJson() {
            $.getJSON('getUserCount.jsp', function(data) {
                var user = "<b>" + data["user"] + "</b>"
                var admin = "<b>" + data["admin"] + "</b>"
                console.log(user, admin);
                $('#user').html(user);
                $('#admin').html(admin);
            });
        }
    });
</script>

</head>
<body>
<h1>Main - 메인</h1>
<h2>
현재 회원 : <span id="user"></span>명 / 관리자 : <span id="admin"></span>명
<input type="button" id="target" value="reload">
</h2>

<hr>
${sessionScope.name }님 환영!! | <a href="logout.jsp">logout</a>
| <a href="modify.jsp">modify</a> | <a href="deleteProc.jsp?id=${sessionScope.id }">delete</a>
<hr>
</body>
</html>