FireDrago

[jQuery] Ajax 로 JSON 데이터 주고받기 본문

프로그래밍/JavaScript

[jQuery] Ajax 로 JSON 데이터 주고받기

화이용 2023. 7. 19. 17:31

JSON

  •  Key 와 Value로 구성되어있다.
  • 개방형 표준 데이터 형식?
    다양한 소프트 웨어나 시스템 간에 데이터를 교환하기 위한 표준화된 형식
    (데이터 교환 국룰 이라고 이해함)

JSON 데이터 형식

자료형 종류 예
숫자
(Number)		 정수 23 , -11 , 197
실수 3.14 , -2.1324
문자열 문자열 "1234"  "가나다" "true" "사랑23"
제어 문자 ₩b (백스페이스) 
₩n (개행)
₩t (탭)
₩/ (슬래시)
배열 [  ] 로 표시한다
요소들은 콤마( , )로 구분 		 "name" : ["홍길동","이순신","임꺽정"]
// 대괄호 안에 배열의 요소를  콤마로 구분해서 나열
객체 JSON 객체는 중괄호  {  }
콤마 ( , )로 프로퍼티 포함		 {
"name" : "홍길동",
"age" : 16,
"weight" : 67
}
// 중괄호 안에 name / value 쌍을 콤마로 구분해서 나타낸다.

 

 

Ajax 이용하여 JSON 데이터 서블릿으로 전달하기 (viewer -> Servlet)

 

1.  jsp 혹은 html  페이지에서 Ajax 사용하여 서블릿 실행 (url 패턴에 따라 선언부 먼저 실행)

2.  Ajax는 데이터를 JSON의형태로 서블릿에 전달

3. 서블릿 클래스는 전달받은 JSON 데이터를 출력한뒤 PrinterWriter 객체로 Response 객체에 내용을 추가

4. Ajax로 돌아온뒤 Success , Error 상황의 function이 실행된다.

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  isELIgnored="false" %> 
<!DOCTYPE html>
<html>
<head>
  <title>JSON ajax 연습</title>
 <script  src="http://code.jquery.com/jquery-latest.min.js"></script> 
 <script>
$(function() {
	$("#checkJson").click(function() {//JSON 형식으로 작성
		var _jsonInfo ='{"name":"박지성","age":"25","gender":"남자","nickname":"날센돌이"}';
		$.ajax({
			type:"post",
			async:false, 
			url:"pro16/json", // 맵핑된 서블릿으로
			data : {jsonInfo: _jsonInfo}, // 이 데이터 들고 먼저 출발
			success:function (data,textStatus){ //서블릿 실행 후  성공시 
			},
		error:function(data,textStatus){// 서블릿 실행 실패 시
		alert("에러가 발생했습니다.");ㅣ
		},
		complete:function(data,textStatus){
		}
		});  
	});
});
 </script>
</head>
<body>
   <a id="checkJson" style="cursor:pointer">전송</a><br><br>
   <div id="output"></div>
</body>
</html>
@WebServlet("/json")
public class JsonServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
		doHandle(request, response);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
		doHandle(request, response);
	}
	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		String jsonInfo = request.getParameter("jsonInfo");//get 파라미터로 JSON 수신
		try {
			JSONParser jsonParser = new JSONParser(); //JSON 변환 객체 생성
			JSONObject jsonObject = (JSONObject)jsonParser.parse(jsonInfo); //문자열 JSON으로
			System.out.println("*회원정보*");
			System.out.println(jsonObject.get("name")); //JSONObject 에서 데이터 꺼냄
			System.out.println(jsonObject.get("age"));
			System.out.println(jsonObject.get("gender"));
			System.out.println(jsonObject.get("nickname"));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

 

Ajax 이용하여 JSON 데이터 뷰어로 전달하기 ( Servlet - > viewer)

 

1. Ajax를 통해 jsp에서 서블릿으로 이동, 실행

2. 서블릿에서 JSONObject 객체를 생성 , JSON 형식으로 데이터 저장

3.  JSONArray 객체에 데이터를 담고 JSONObject 객체에 담은뒤

4. JSONObject 의 toJSONString( ); 메서드로 String 형태로 반환한다.

5. PrinterWriter 객체의 writer( String) 메서드로 response에 JSON을 문자열 형태로 담아서 반환한다.

 

6. Ajax로 돌아와서 전달받은 데이터를 JSON.parse(data); 를 이용하여 JSON 형식으로 파싱하여 꺼내서 데이터 사용한다.

package sec03.ex01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;


@WebServlet("/json2")
public class JsonServlet2 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doHandle(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		PrintWriter writer = response.getWriter();

		JSONObject totalObject = new JSONObject();
		JSONArray membersArray = new JSONArray();
		JSONObject memberInfo = new JSONObject();

		memberInfo.put("name", "박지성");
		memberInfo.put("age", "25");
		memberInfo.put("gender", "남자");
		memberInfo.put("nickname", "날쌘돌이");
		membersArray.add(memberInfo);

		memberInfo = new JSONObject();
		memberInfo.put("name", "김연아");
		memberInfo.put("age", "21");
		memberInfo.put("gender", "여자");
		memberInfo.put("nickname", "칼치");
		membersArray.add(memberInfo);

		totalObject.put("members", membersArray);

		String jsonInfo = totalObject.toJSONString();
		System.out.print(jsonInfo);
		writer.print(jsonInfo);
	}

}
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<title>JSON 테스트</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
	$(function() {
    	$("#checkJson").click(function() {
    	$.ajax({
            type:"post",
            async:false, 
            url:"/pro16/json2",
            success:function (data,textStatus){
            	var jsonInfo = JSON.parse(data); // String으로 받고 JSON으로 파싱
            	var memberInfo ="회원 정보<br>";
	        	memberInfo += "=======<br>";
	        	for(var i in jsonInfo.members){
			   		memberInfo += "이름: " + jsonInfo.members[i].name+"<br>";
			  		memberInfo += "나이: " + jsonInfo.members[i].age+"<br>";
			   		memberInfo += "성별: " + jsonInfo.members[i].gender+"<br>";
			   		memberInfo += "별명: " + jsonInfo.members[i].nickname+"<br><br><br>";
	        	}
	        	$("#output").html(memberInfo);
	       	},
	      	error:function(data,textStatus){
	         		alert("에러가 발생했습니다.");ㅣ
	      	},
	      	complete:function(data,textStatus){
	      }
	   }); 
       });
    });
 </script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer">회원 정보 수신하기</a>
	<br>
	<br>
	<div id="output"></div>
</body>
</html>

'프로그래밍 > JavaScript' 카테고리의 다른 글

[js] 페이지네이션 만들기  (0) 2024.06.18
[jQuery] 제이쿼리 Ajax 사용하기  (0) 2023.07.18
[JavaScript] 회원가입 필수입력  (0) 2023.06.18
[JavaScript] 장바구니 구현  (0) 2023.06.15
[JavaScript] 슬라이드 구현하기 (javascript)  (0) 2023.06.13
'프로그래밍/JavaScript' Related Articles more