PROGRAMING: 05day JQuery +Ajax

1. JSON 파일로 만들기 라이브러리

라이브러리 다운 http://json.org/

2. json 데이터 라이브러리로 만들기

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>

<%@ page import="javax.naming.Context"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="javax.naming.NamingException"%>
<%@ page import="javax.sql.DataSource"%>

<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.SQLException"%>

<%@ page import="org.json.simple.JSONArray"%>
<%@ page import="org.json.simple.JSONObject"%>

<%
    //DB에서 데이터를 가져와서 JSON파일 만들기
    Connection conn = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;

    //JSON 배열 만듦
    JSONArray jsonArray = new JSONArray();

    try {
        Context initCtx = new InitialContext();
        Context envCtx = (Context) initCtx.lookup("java:comp/env");
        DataSource dataSource = (DataSource) envCtx.lookup("jdbc/oracle");

        conn = dataSource.getConnection();

        String sql = "select * from dept";
        pstmt = conn.prepareStatement(sql);

        rs = pstmt.executeQuery();
        
        while (rs.next()) {
            //JSON 객체 만듦
            JSONObject obj = new JSONObject();
            obj.put("deptno", rs.getString("deptno"));
            obj.put("dname", rs.getString("dname"));
            obj.put("loc", rs.getString("loc"));
            
            jsonArray.add(obj);
        }

    } catch (NamingException e) {
        System.out.println("에러 : " + e.getMessage());
    } catch (SQLException e) {
        System.out.println("에러 : " + e.getMessage());
    } finally {
        if (rs != null) rs.close();
        if (pstmt != null) pstmt.close();
        if (conn != null) conn.close();
    }
    
    out.println(jsonArray);
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //jQuery Ajax
        $('#btn').on('click',function(){
            //Ajax요청
            $.ajax('./data/data.csv',{
                //성공시 수행
                success: function(data){
                    alert(data);
                }
            });
            
            //Ajax요청 2번쨰 방법
            $.ajax({
                url: './data/data.csv',
                //성공시 수행
                success: function(data){
                    alert(data);
                }
            });
        });
    });

</script>
</head>
<body>
<button id='btn'>요청</button>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //jQuery Ajax
        $('#btn').on('click',function(){
            /* Ajax 메서드
            url : 대상 주소
            type : GET or POST
            success : 성공시 이벤트
            error : 실패 시 이벤트
            async : 동기, 비동기
            dataType : return data의 종류 (html, script, json, text, sml 자동 감지)
            contentType : 전송 데이터의 형태
            */
            $.ajax({
                url: './data/data.json',
                type: 'get',
                //dataType: 'json',
                success: function(data,status,xhr){
                    console.log(data);
                    console.log(status);
                    console.log(xhr);
                },
                error: function(data){
                    alert("서버 에러");
                }
            });
        });
    });

</script>
</head>
<body>
<button id='btn'>요청</button>
</body>
</html>

5
ex.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //jQuery Ajax
        $('#btn').on('click',function(){
            //$.ajax, $.get, $.post, $.getJSON, $.getScript;
            $.ajax({
                //jsp서버에 요청해서 받기
                //url: './data/data.jsp?name=test&id='+encodeURIComponent('홍길동'), //url직접적을때는 인코딩 필요함
                url: './data/data.jsp',
                type: 'post',
                data:{
                    id: 'test',
                    name: '홍길동'
                },
                success: function(data,status,xhr){
                    console.log(data.trim());
                    console.log(status);
                    console.log(xhr);
                },
                error: function(data){
                    alert("서버 에러");
                }
            });
        });
    });

</script>
</head>
<body>
<button id='btn'>요청</button>

data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("utf-8");
    
    String id = request. getParameter("id");
    String name = request. getParameter("name");
    
    System.out.println(id+" / "+ name);
    out.println(id+" / "+ name);
%>

6
html.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<ul>
    <li>사과</li>
    <li>수박</li>
    <li>딸기</li>
</ul>

ex.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //jQuery Ajax
        $('#btn').on('click',function(){
            // Ajax 요청후에 html에 한번에 넣기
            $('#wrap').load('./data/html.jsp');
        });
    });
</script>
</head>
<body>
<button id='btn'>요청</button>
<hr>
<div id="wrap"></div>
</body>
</html>

7
html.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<ul>
    <li>사과</li>
    <li>수박</li>
    <li>딸기</li>
</ul>

ex.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //jQuery Ajax
        $('#btn').on('click',function(){
            //ajax 상태 표시
            $(document).ajaxComplete(function(){
                $('#ajax-event').append('<h2>ajaxComplete</h2>');
            }).ajaxError(function(){
                $('#ajax-event').append('<h2>ajaxError</h2>');
            }).ajaxSend(function(){
                $('#ajax-event').append('<h2>ajaxSend</h2>');
            }).ajaxSuccess(function(){
                $('#ajax-event').append('<h2>ajaxSuccess</h2>');
            }).ajaxStart(function(){
                $('#ajax-event').append('<h2>ajaxStart</h2>');
            });
            
            // Ajax 요청후에 html에 한번에 넣기
            $('#wrap').load('./data/html.jsp');
        });
    });
</script>
</head>
<body>
<button id='btn'>요청</button>
<hr>
<div id="ajax-event"></div>
<div id="wrap"></div>
</body>
</html>

8. 댓글 게시판

완성못함

PROGRAMING

2016년 8월 26일 금요일

05day JQuery +Ajax

댓글 없음:

댓글 쓰기

블로그 보관함