본문 바로가기
CLASS/AJAX

#5-1 / Jquery Ajax & API 서버통신 (JSON) / JSONArray,JSONObject 사용

by hingu 2024. 7. 19.

ecma랑 jquery 는 사실 매칭이 잘 안됨.. 버그 생김ㅋ

 

❓ API 서버

  • REST ( get,post )
    xml,json 로드받는 역할
    아키텍처 구조
  • RESTful ( get,post,put,delete ) - url 파라미터로 세팅
  • CDN ( get,post ) - Image,Video
  • SOAP ( xml만 사용 )
    나중에 공부해보길 추천ㅋ , REST보다 어려움
    REST와 특성이 비슷함
    금융권에서 많이 사용 - 보안 좋아서
    프로토콜 구조(서버와 서버간의 DATA 교환)

❓ 아키텍처 , 프로토콜

  • 아키텍처 : 데이터의 구조 형태
  • 프로토콜 : 서버와 서버간의 통신

1. html로 받아서 json으로 변경하는 방식

2. 처음부터 json파일로 받는 형식

⚡ REST (JSON 이니까) - (dataType : "HTML" 로 받기)
dataType : HTML,TXT,XML,JSON  (rest_json.jsp 에서 contentType="text/html; 라서 html로 보내야함)
1. web 으로 배열을 출력하는 형태 : HTML,TEXT로 핸들링
2. 웹 디렉토리에 .json 파일 을 생성하여 front-end에서 데이터를 가져가는 형태 : JSON으로 핸들링 
    - 예 ) 회원가입 페이지 제작 -> '회원가입 완료되었습니다' 실행됨가 동시에  json파일 만들어버림
      예2 ) 상품 등록 페이지 제작 -> '상품 등록 완료되었습니다' 실행됨가 동시에 json파일 만들어버림
      => 프론트가 가져가서 리스트 출력

👀 {"member":["hong","park","kim"]} 이 형태로 찍기
=> JSONObject : {}형태 배열 만들때 사용 , JSONArray : []형태 배열 만들 때 사용
     (org.json.simple 은 add , org.json은 put 사용)

- ajax1.jsp : 버튼 클릭시 @controller에서 값 출력한 rest_json.do에서 값을 그대로 가져옴
 
$("#btn").click(function(){
    //get통신할거임
    $.ajax({
        url : "./rest_json.do",
        cache : false,
        type : "GET",
        dataType : "HTML",
        success : function($data){
            //console.log($data); //배열처럼 생긴 문자열 찍힘 (url 경로의 파일 내용이 그대로 찍힘)
            console.log(JSON.parse($data));
        },
        error : function($data){
            console.log($data);
        }

    });
})

 

$.ajax 대신 -  $.get , $.post 이렇게 작성해도 됨 (처음부터 get으로 받을건지 post로 받을건지 정하는거)


- apimain.java (@Controller) - @GetMapping("/jq/rest_json.do") : rest_json.do 에 결과값 찍어주는 용도
 
@GetMapping("/jq/rest_json.do")
public String rest_json(Model m) throws Exception{
    JSONArray ja = new JSONArray();
    ja.add("hong"); // org.json.simple 은 add , org.json은 put 사용
    ja.add("park");
    ja.add("kim");
    JSONObject jo = new JSONObject();
    jo.put("member", ja);

    m.addAttribute("data",jo);

    return "/jq/rest_json";
}


- rest_json.jsp (데이터 찍을 파일) 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
${data}

trimDirectiveWhitespaces="true" : 앞뒤 공백 다 없애기

JSON.Parse() 를 해줘야 배열로 찍힘


 

⚡ 바로 위 예제에서 추가 -  json파일 만들어주는 부분 (dataType : "JSON" 으로 받기)
(ex) 회원가입이 완료되었다고 가정, 그 시점에  json파일 만들어주기)

- ajax1.jsp: 버튼 클릭시 @controller에서 만들어준 경로/test.json에서 값을 그대로 가져옴
 
<body>
	<input type="button" value="JSON 로드" id="btn2">
	<ul id="htmlview"></ul>
</body>

<script>
    $(function(){	
        //json 파일로 배열값을 로드하는 형태
        $("#btn2").click(function(){
            $.ajax({
                url : "../upload/test2.json", //json 파일
                cache : false,
                type : "GET",
                dataType : "JSON",
                success : function($data){
                    console.log($data);
                    $.each($data["member"],function(node,value){ //node: 대표키, value: 대표키 안 값 
                        $("#htmlview").append("<li>"+value+"</li>")
                    });
                },
                error : function($data){
                    console.log($data);
                }

            });
        })
    });
</script>


- apimain.java (@Controller) - @GetMapping("/jq/json_make.do") 
 
//json파일 생성하는 URL
@GetMapping("/jq/json_make.do")
public String json_make(HttpServletResponse res,HttpServletRequest req){
    res.setContentType("text/html;charset=utf-8");
    try {
        this.pw = res.getWriter();

        JSONArray ja = new JSONArray();
        ja.add("hong2"); // org.json.simple 은 add , org.json은 put 사용
        ja.add("park2");
        ja.add("kim2");
        JSONObject jo = new JSONObject();
        jo.put("member", ja);

        String url = req.getServletContext().getRealPath("/upload/");

        FileWriter fw = new FileWriter(url+"test2.json");
        fw.write(jo.toJSONString()); //json파일 만들기
        fw.flush();
        fw.close();
        this.pw.write("<script>alert('회원가입 완료!');</script>");

        //String result = jo.toString(); //org.json 사용할 경우엔 이 과정을 거쳐야함
    }catch(Exception e) {
        this.pw.write("<script>alert('error');</script>");
    }finally {
        this.pw.close();
    }


    return null;
}

 

console 잘찍힘
반복문 돌리면 잘 찍힘

=> ⭐ fileWriter로 json 만들어주고 계속 갱신되어도 에러없이 덮어써짐!

 

'CLASS > AJAX' 카테고리의 다른 글

#5-3 / Jquery Ajax & API 서버통신 (XML 로드)  (0) 2024.07.19
#5-2 / Jquery Ajax & API 서버통신 (URL JSON 로드)  (0) 2024.07.19
#4-3 / Ecma + 배열로 Ajax(fetch)로 전송  (0) 2024.07.17
#4-2 / ECMA + Ajax (POST통신)  (0) 2024.07.17
#4-1 / ECMA + Ajax (GET통신) - 아이디 중복확인  (0) 2024.07.17

관련글

티스토리툴바