하고재비

[AJAX] json html 본문

AJAX

[AJAX] json html

DeadDE 2018. 1. 9. 00:24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
    request.setCharacterEncoding("utf-8");
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", 0);
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<title>Style test</title>
 
<!-- 
    searchData() ==>  getData() ==>  resGetData()
 -->
 
<script language="JavaScript" type="text/JavaScript">
    var xhrObject;            //XMLHttpRequest 객체를 저장할 변수를 전역변수로 선언
 
    function createXHR() {        //XMLHttpRequest 객체 생성, 웹브라우저 종류에 따라 다른 생성유의!
        if (window.ActiveXObject) {
            xhrObject = new ActiveXObject("Microsoft.XMLHTTP");
        } else if (window.XMLHttpRequest) {
            xhrObject = new XMLHttpRequest();
        }
    }
 
    function getData() {
        var form_name = "form_main";
        var user_id = document.forms[form_name].elements["txt_user_id"].value;
 
        createXHR();    //    createXHR() 메소드 호출!   XMLHTTPRequest 생성! 
 
        var url = "./testFile.jsp";                //요청할 url 설정
        var reqparam = "user_id=" + user_id;    
        xhrObject.onreadystatechange = resGetData;    //응답처리 결과를 처리메소드인 resultProcess() 메소드 설정
        xhrObject.open("Post", url, "true");        // 서버의 요청설정. 설정된 리소스 요청할 준비
        xhrObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");//post방식의 경우 반드시 설정
        xhrObject.send(reqparam);        //서버로 요청을 보냄
    }
 
    function resGetData() {
        if (xhrObject.readyState == 4) {
            if (xhrObject.status == 200) {
                var result = xhrObject.responseText;
                var objRes = eval("(" + result + ")");
                var num = objRes.datas.length;
                var res = "<table cellpadding='0' cellspacing='0' border='0' width='980'>";
                var resDiv = document.getElementById("div_res");
 
                if (num < 1) {
                    res += "<tr><td width='980' height='100' align='center' style='font-size:50;'>검색결과가 없습니다.</td></tr>";
                } else {
                    for (var i = 0; i < num; i++) {
                        var user_id = objRes.datas[i].ID;
                        var user_name = objRes.datas[i].NAME;
                        var user_phone = objRes.datas[i].PHONE;
                        var user_grade = objRes.datas[i].GRADE;
                        var user_date = objRes.datas[i].WRITE_TIME;
 
                        res += "<tr>";
                        res += "<td>";
                        res += "<td name='res_id' align='center' style='width: 950px; font-size: 50'";
                        res += "bgcolor='#FFFFCC'>" + user_id + "</td>";
 
                        res += "<td>";
                        res += "<td name='res_name' align='center' style='width: 950px; font-size: 50'";
                        res += "bgcolor='#FFFFCC'>" + user_name + "</td>";
 
                        res += "<td>";
                        res += "<td name='res_phone' align='center' style='width: 950px; font-size: 50'";
                        res += "bgcolor='#FFFFCC'>" + user_phone + "</td>";
 
                        res += "<td>";
                        res += "<td name='res_phone' align='center' style='width: 950px; font-size: 50'";
                        res += "bgcolor='#FFFFCC'>" + user_grade + "</td>";
 
                        res += "<td>";
                        res += "<td name='res_date' align='center' style='width: 950px; font-size: 50'";
                        res += "bgcolor='#FFFFCC'>" + user_date + "</td>";
 
                        res += "<td>";
                        res += "<td width=\"245\"><img src = './img/update.png' width=\"30\" height=\"20\" onclick='javascript:UpdatetData_form_(\"" + user_id + "\",\"" + user_name + "\",\"" + user_phone + "\",\"" + user_grade + "\");'>";
                        res += "</td>";
 
                        res += "<td>";
                        res += "<td width=\"245\"><img src = './img/del.png' width=\"30\" height=\"20\" onclick='DeleteData(\"" + user_id + "\");'>";
                        res += "</td>";
 
                        res += "</tr>";
                    }
                }
            }
            res += "</table>"
            resDiv.innerHTML = res;
        }
    }
    function searchData() {
        var form_name = "form_main";
        var user_id = document.forms["form_main"].elements["txt_user_id"].value;
        getData();
//         if (user_id == "") {
//             alert("아이디 입력하시오");
//             document.forms[form_name].elements["txt_user_id"].focus();
//             return;
//         } else {
//             getData();
//         }
    }
</script>
</head>
<body>
    <div id='div_main' width='980' height='300'
        style="visibility: visible; position: absolute; left: 10px; top: 50px; z-index: 1;">
        <form name="form_main" onSubmit="javascript:return false;">
            <table border='0' width='980' cellpadding='0' cellspacing='0'>
                <tr>
                    <td width='245'></td>
                    <td width='100' align='right'><input type='text'
                        name='txt_user_id' size='10' value='' maxlength='10'
                        style='width: 100px; font-size: 20; text-align: left;'
                        'onkeyup='javascript:searchData();'></td>
                    <td width="245"><img src='./img/search.gif' width="245"
                        height="50" onclick='javascript:searchData();'></td>
                    <td width='245'></td>
                </tr>
            </table>
        </form>
    </div>
    
    <div id='div_res' width='980'
        style="visibility: visible; position: absolute; left: 0px; top: 230px; z-index: 1;">
        <table border='1' width='980' cellpadding='10' cellspacing='0'>
            <tr>
                <td align='center' style='width: 950px; font-size: 50'
                    bgcolor='#FFFFCC'>결과물</td>
            </tr>
        </table>
    </div>
 
</body>
</html>
cs


JSON

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
  
{
    "datas":
    [
        {"ID":"asd","NAME":"최승현","PHONE":"010-1111-1111","GRADE":"3","WRITE_TIME":"2014-04-17 01:57:01.0"},
        {"ID":"iu","NAME":"이지은","PHONE":"010-2222-2222","GRADE":"4","WRITE_TIME":"2014-04-17 01:57:01.0"},
        {"ID":"suji","NAME":"배수지","PHONE":"010-3333-3333","GRADE":"4","WRITE_TIME":"2014-04-17 01:57:01.0"},
        {"ID":"brad","NAME":"브래드핏","PHONE":"010-4444-4444","GRADE":"3","WRITE_TIME":"2014-04-17 01:57:01.0"},
        {"ID":"deadde","NAME":"김동언","PHONE":"010-5555-5555","GRADE":"3","WRITE_TIME":"2014-04-17 01:57:01.0"},     
        {"ID":"gd","NAME":"권지용","PHONE":"010-6666-6666","GRADE":"3","WRITE_TIME":"2014-04-17 01:57:01.0"}
    ]
}
cs


'AJAX' 카테고리의 다른 글

[JavaScript] json + javascript  (0) 2017.12.12
[JSP]예제  (0) 2017.12.11
공유하기 링크
'AJAX' Related Articles more
Comments