나만의 코드 공방

코드로 놀고, 언어로 성장하는 공방.

프로그래밍 언어/자바 웹

Ajax 이용해 서버와 JSON 데이터 주고받기

· 코딩마이데이

이번에는 서버와 서블릿과 JSON 자료를 주고받는 기능을 알아보겠습니다. 서버의 서블릿에서 JSON을 사용하려면 JSON 라이브러리를 설치해야 합니다.

 

1. 다음 사이트로 접속합니다.

https://code.google.com/archive/p/json-simple/downloads

 

2. json-simple-1.1.1.jar를 클릭해 다운로드합니다.

 

3. 이클립스 프로젝트의 /WebContent/lib 폴더에 붙여 넣습니다.

 

4. 이번에는 JSP에서 제이쿼리의 Ajax 기능을 이용해 서블릿으로 JSON 데이터를 전송하기 위해 sec03.ex01 패키지를 만들고 JsonServlet 클래스를 추가합니다.

실습 파일 위치

 

5. JsonServlet1 클래스를 다음과 같이 작성합니다. 먼저 Ajax로 전달된 JSON 문자열을 getParameter() 메서드를 이용해 가져옵니다. 그런 다음 JSONParser 클래스를 이용해 JSONObject를 가져오고 JSON 데이터의 name 속성으로 value를 출력합니다.

package sec03.ex01;

import java.io.IOException;

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.JSONObject;
import org.json.simple.parser.JSONParser;

/**
 * Servlet implementation class JsonServlet1
 */
@WebServlet("/json")
public class JsonServlet1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
		doHandle(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      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");
		try {
			JSONParser jsonParser = new JSONParser();
			JSONObject jsonObject = (JSONObject) jsonParser.parse(jsonInfo);
			System.out.println("* 회원 정보*");
			System.out.println(jsonObject.get("name"));
			System.out.println(jsonObject.get("age"));
			System.out.println(jsonObject.get("gender"));
			System.out.println(jsonObject.get("nickname"));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

 

6. json5.jsp를 다음과 같이 작성합니다. 자바스크립트에서 회원 정보를 JSON 객체로 만들어 매개변수 이름 jsonInfo로 ajax를 이용해 서블릿으로 전송합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

<c:set var="contextPath" value="${pageContext.request.contextPath}"  /> 
<!DOCTYPE html>
<html>
<head>
  <title>JSON ajax 연습</title>
 <script  src="http://code.jquery.com/jquery-latest.min.js"></script> 
 <script>
    $(function() {
        $("#checkJson").click(function() {
    	   var _jsonInfo ='{"name":"박지성","age":"25","gender":"남자","nickname":"날센돌이"}';
    	   $.ajax({
             type:"post",
             async:false, 
             url:"${contextPath}/json",
             data : {jsonInfo: _jsonInfo},
             success:function (data,textStatus){
	     },
	     error:function(data,textStatus){
	        alert("에러가 발생했습니다.");ㅣ
	     },
	     complete:function(data,textStatus){
	     }
	   });  //end ajax	

       });
    });
 </script>
</head>
<body>
   <a id="checkJson" style="cursor:pointer">전송</a><br><br>
    <div id="output"></div>
</body>
</html>

 

7. http://localhost:8080/pro16/test04/json.jsp로 요청하여 JSP 페이지에서 전송을 클릭하면 이클립스 콘솔에 다음과 같이 회원 정보가 출력됩니다.

실행 결과

 

 

8. 이번에는 반대로 서버의 서블릿에서 웹 페이지로 JSON 형식의 회원 정보를 전송해 보겠습니다. JsonServlet2 클래스를 생성됩니다.

실습 파일 위치

 

9. JsonServlet2 클래스를 다음과 같이 작성합니다.

 

JSON  배열에 회원 정보를 저장하여 JSP 페이지로 전송하고 JSON 배열에 정보를 저장하는 과정은 다음과 같습니다.

 

1 memberInfo로 JSONObject 객체를 생성한 후 회원 정보를 name/value 쌍으로 저장합니다.

2 membersArray의 JSONArray 객체를 생성한 후 회원 정보를 저장한 JSON 객체를 체례대로 저장합니다.

3 membersArray 배열에 회원 정보를 저장한 후 totalObject로 JSONObject 객체를 생성하여 name에는 자바스크립트에거 접근할 때 사용하는 이름인 members를, value에는 membersArray를 최종적으로 저장합니다.

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;

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doHandle(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      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);
	}

}

 

10. json6.jsp를 다음과 같이 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

<c:set var="contextPath" value="${pageContext.request.contextPath}"  /> 
<!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:"${contextPath}/json2",
            success:function (data,textStatus){
            	var jsonInfo = JSON.parse(data);
            	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>

 

11. http://localhost:8080/pro16/test04/json6.jsp로 요청하여 회원 정보 수신하기를 클릭합니다. 그러면 서블릿에서 만든 JSON 데이터를 전달받아 다음과 같이 화면에 회원 정보를 출력합니다.

실행 결과

 

 

12. 마지막으로 여러 개의 배열을 JSON으로 전달하는 예제를 만들어 보겠습니다. JsonServlet3 클래스를 추가로 생성합니다.

실습 파일 위치

 

 

13. JsonServlet3 클래스를 다음과 같이 작성합니다.

 

여러 개의 파일을 전송하는 과정은 다음과 같습니다.

 

1 bookInfo의 JSONObject 객체를 생성한 후 도서 정보를 name/value 쌍으로 지정합니다.

2 bookArray의 JSONArray 객체를 생성한 후 도서 정보를 저장한 bookInfo를 차례대로 저장합니다.

3 이미 회원 배열을 저장하고 있는 totaObject의 name에는 배열 이름에 해당하는 books를 value에는 bookArray를 최종적으로 저장합니다.

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;

/**
 * Servlet implementation class JsonServlet3
 */
@WebServlet("/json3")
public class JsonServlet3 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      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 totaObject = 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);
		totaObject.put("members", membersArray);

		JSONArray bookArray = new JSONArray();
		JSONObject bookInfo = new JSONObject();
		bookInfo.put("title", "초보자를 위한 자바 프로그래밍");
		bookInfo.put("writer", "이병승");
		bookInfo.put("price", "30000");
		bookInfo.put("genre", "IT");
		bookInfo.put("image", "http://localhost:8080/pro16/image/image1.jpg");
		bookArray.add(bookInfo);

		bookInfo = new JSONObject();
		bookInfo.put("title", "모두의 파이썬");
		bookInfo.put("writer", "이승찬");
		bookInfo.put("price", "12000");
		bookInfo.put("genre", "IT");
		bookInfo.put("image", "http://localhost:8080/pro16/image/image2.jpg");
		bookArray.add(bookInfo);

		totaObject.put("books", bookArray);

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

}

 

14. json7.jsp를 다음과 같이 작성합니다. ajax로 JSON 데이터를 가져온 후 서블릿에서 각각의 배열에 대해 지정한 배열 이름으로 회원 정보의 도서 정보를 가져와 출력합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

<c:set var="contextPath" value="${pageContext.request.contextPath}"  /> 
<!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:"${contextPath}/json3",
            success:function (data,textStatus){
               var jsonInfo = JSON.parse(data);
             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>";
	     }
	        	
	     var booksInfo = "<br><br><br>도서 정보<br>";
	     booksInfo += "===========<br>";
	     for(var i in jsonInfo.books) {
	        booksInfo += "제목: " + jsonInfo.books[i].title+"<br>";
	        booksInfo += "저자: " + jsonInfo.books[i].writer+"<br>";
	        booksInfo += "가격: " + jsonInfo.books[i].price+"원 <br>";
	        booksInfo += "장르: " + jsonInfo.books[i].genre+"<br>";
            imageURL = jsonInfo.books[i].image;
            booksInfo += "<img src="+imageURL+" />"+"<br><br><br>";
	     }
	     $("#output").html(memberInfo+"<br>"+booksInfo);
	   },
	   error:function(data,textStatus){
	      alert("에러가 발생했습니다.");ㅣ
	   }
	  });  //end ajax	
        });
     });
</script>
</head>
<body>
   <a id="checkJson" style="cursor:pointer">데이터 수신하기</a><br><br>
    <div id="output"></div>
</body>
</html>

 

15. http://localhost:8080/pro16/json7.jsp로 요청하여 데이터 수신하기를 클릭하면 다음과 같이 회원 정보를 출력합니다. 이번에는 회원 정보는 물론 도서 정보도 배열로 전달받아 출력합니다.

회원 정보 및 도서 정보 출력

 

'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글

회원 정보 추가 기능 구현  (0) 2026.06.08
회원 정보 조회 기능 구현  (0) 2026.06.05
JSON의 자료형 사용 실습  (0) 2026.05.30
제이쿼리에서 JSON 사용하기  (0) 2026.05.27
ID 중복 여부 확인하기  (0) 2026.05.24

티스토리툴바