Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[Spring] Ajax , json 처리 실습1 본문

Java/Spring

[Spring] Ajax , json 처리 실습1

http://portfolio.wonpaper.net 2022. 11. 4. 13:54

확인버튼을 누르면 ajax 처리되어 JSON 형태의 데이터를 받아서 테이블 형태로 찍어준다.

 

 

[  HomeController.java  ]

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
package my.control;
 
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.core.SpringVersion;
 
import java.text.DateFormat;
import java.util.Date;
import java.io.PrintWriter;
import java.io.IOException;
 
import java.util.Locale;
import java.util.ArrayList;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.ui.Model;
import org.apache.commons.dbcp.BasicDataSource;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import java.sql.*;
 
 
@Controller
public class HomeController 
{    
    
    
    // test/home
    @RequestMapping(value = "/home", method = RequestMethod.GET)
    public String home(Locale locale, Model model) {
                
        //hello.method1();
        return "home"; // forward : view home.jsp
    }    
 
    // http://localhost:8085/AjaxTest/test/jsoncall    
    @RequestMapping(value = "/jsoncall", method = RequestMethod.GET, produces="application/json;charset=utf8")
    public @ResponseBody String jsoncall(Model model) {        
        // @ResponseBody 는 바로 text 문자로 찍힌다.
                
        //[{"name":"홍길동", "age":20}, {"name":"고길동", "age":22}]
        JSONArray jarr = new JSONArray();        
        
        JSONObject jo1 = new JSONObject();
        jo1.put("name", "홍길동");
        jo1.put("age", 20);
        
        JSONObject jo2 = new JSONObject();
        jo2.put("name", "이순신");
        jo2.put("age", 34);        
        
        jarr.add(jo1);
        jarr.add(jo2);
        
        return jarr.toJSONString(); 
    }        
}
 
 
 
 cs

 

[ ajax.html ]

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
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    h1 {color:red;}
</style>
<script>
    function recvFn() {
        //mydiv.innerText = xhr.responseText; 단순 json문자열로 찍어본다.
        jStr = xhr.responseText
        console.log(jStr)
        
        jArr = JSON.parse(xhr.responseText)
        console.log(jArr)
        
        myh.innerHTML=""
        myb.innerHTML=""
        
        tr = myh.insertRow()
        td1 = tr.insertCell()
        td2 = tr.insertCell()
        td1.innerText = "이름"
        td2.innerText = "나이"
        //<tr><td>이름</td><td>나이</td></tr>
        
        
        for (j of jArr) {
            tr = myb.insertRow()            
            td1 = tr.insertCell()
            td2 = tr.insertCell()
            td1.innerText = j['name']
            td2.innerText = j['age']
        
            console.log(j['name'], j['age'])
        }
    }
    
    function fn() {
        xhr = new XMLHttpRequest();
        xhr.open('GET',"test/jsoncall");
        xhr.onload = recvFn; // 수신시 호출되는 함수 등록
        xhr.send();          // ajax요청
    }
</script>
</head>
<body>
    <h1>ajax test</h1>
    <button onclick="fn()">확인</button>
    <a href="test.html" target="myiframe">요청하기</a>
    
    <hr>
    <div id="mydiv"></div>
    
    <table>
        <thead id="myh">
        </thead>    
        <tbody id="myb">
        </tbody>
    </table>
    
    <iframe name="myiframe" width="100%" height="300"></iframe>
</body>
</html>
 cs

 

 

'Java > Spring' 카테고리의 다른 글

[Spring] java: error: release version 5 not supported 에러날때  (0) 2023.06.28
[Java Spring] [Mac] lombok 설치후 에러날때 - Unable to make protected final java.lang.Class java.lang.ClassLoader.defineClass(java.lang.String,byte[],int,int) throws java.lang.ClassFormatError accessible: module java.base does not "opens java.lan..  (0) 2023.06.02
[Spring] log4j.xml 에서 Cannot find DTD 에러 해결하기  (0) 2023.03.29
[Spring] Mac 에서 Tomcat 실행 권한 Error 날때  (0) 2022.12.25
[Spring] Ajax , json 처리 실습2 - DB Pool 이용  (2) 2022.11.04
'Java/Spring' Related Articles more
Comments