본문 바로가기
programming/javascript

자바 스프링 url 파라미터 json 객체로 변환하기

by 개코 - 개발과 코딩 2023. 1. 10.

서버로 데이터를 보낼 때 json 객체를 사용하면 편하다. form 태그의 input 입력 태그는 serialize 를 이용해 url 파라미터를 만들 수 있다. 이것을 json 객체로 변환하면 서버로 데이터를 전송하기 전에 데이터를 한번 더 가공하는 것이 좀 더 수월해진다. 전송 전 데이터 가공 작업이 조금은 수월해지는 이점이 있다.

자바 스프링 url 파라미터 json 객체로 변환하기

jquery의 serialize 를 사용하면 form 태그 안에 input 입력 태그들의 값을 url 파라미터로 변환할 수 있다.

그리고, ajax 형태의 비동기로 데이터를 전송하고 요청 결과값을 받을 수 있다.

url 파라미터는 문자열로써 name=value 형태의 나열된 값이다.

이것을 json 객체로 변환할 수 있다면 전송된는 파라미터에 대한 데이터 가공이 좀 더 수월해 질 수 있다.

먼저, 자바스크립트에서 문자열을 json 객체로 변환하여 사용할 때는 JSON.parse 메서드를 사용한다.

JSON.parse 메서드

데이터를 전송하고 받을 때 json 은 요긴한 형태의 데이터 구조를 가지고 있다.

key : value 형태를 취하여 객체로 변환하여 사용하면 데이터의 가공도 수월해 진다.

JSON.parse 메서드는 json 문자열을 json 객체로 변환하도록 해 준다.

아래는 json 문자열을 json 객체로 변환하는 방법이다.

JSON.parse("json 문자열");

json 으로 변환하고 데이터 전송하기

form 태그 내부의 input 입력 태그의 값을 jqeury 의 serialize 메서드를 사용하면 서버로 편하게 파라미터를 구성하여 전송할 수 있다.

하지만, 파라미터의 내용을 임의로 변경할 경우가 생길 수 있는데 이 때 json 객체로 변환하여 사용하면 수월하게 데이터의 가공을 할 수 있다.

당연히 ajax 를 이용해 서버로 보내는 데이터를 가공하는 것이 좀 더 편해지는 것이다.

아래는 방법이다.

  1. form 태그 내부의 input 입력 태그들을 serialize 하여 파라미터 문자열로 만든다.
  2. 파라미터 문자열을 JSON.parse 메서드를 사용하여 json 객체로 변환한다.
  3. 변환된 객체를 $.ajax 를 사용하여 서버로 전송한다.

url 파라미터 만들기

먼저 form 태그에 있는 input 입력 태그들을 jqeury 의 serialize 하여 url 파라미터로 만들어 본다.

html 을 사용하여 form 태그를 먼저 구성한다.

<form name="sndForm">
	<input type="text" name="txtA" value="a">
	<input type="text" name="txtB" value="b">
	<input type="text" name="txtC" value="c">
</form>

이제 serialize 메서드를 사용하여 서버로 전송하기 위한 url 파라미터 문자열을 만들어 본다.

jqeury 를 사용하기 때문에 당연히 jqeury 라이브러리를 CDN 에서 가져오도록 한다.

var formData = $("form[name=\"sndForm\"]").serialize();
console.log(formData);

F12 디버그 콘솔에서 출력된 결과를 보자.

form 에 있던 input 입력 태그들의 값이 url 파라미터 형태로 출력되는 것을 볼 수 있다.

json 객체로 변환하기

url 파라미터 문자열를 json 객체로 변환하기 위해 JSON.parse 메서드를 사용한다.

JSON.parse 메서드의 인자값으로는 json 형태의 문자열이 필요하지만, replace 문자열 메서드를 사용하여 json 문자열처럼 만들어줄 필요가 있다.

아래는 url 파라미터를 json 객체로 변환하는 코드이다.

formData = JSON.parse('{"' + decodeURI(formData.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
console.log(formData);

결과 화면을 보자.

json 객체로 잘 변환되고 디버그 콘솔에서 객체형태로 데이터를 볼 수 있다.

$.ajax 이용 서버로 전송하기

만들어진 json 객체를 이용하여 서버로 데이터를 전송해 보도록 한다.

서버는 자바 스프링을 이용했지만, 다른 서버언어를 사용해도 상관없다.

request.getParameter 형태로 json 객체의 key 값을 지정하면 그만이다.

$.ajax({
	type: "post", dataType: "json", async: false,
	url: "/ztest/getparameter",
	data: formData
	beforeSend: function( xhr, settings ) {
		console.log( xhr );
		console.log( settings );
		console.log( settings.data );
	},
	error: function(xhr, status, error){ 
    	console.log("에러", xhr, status, error, (xhr.responseText).replace(/<[^>]*>?/g, '') ); 
    },
	success : function(data){ 
		console.log(data);
		$("#resultCode").text( data.code );
		$("#resultMessage").text( data.message );
	}
});

서버로 값이 잘 넘어오는지 확인하기 위해 확인을 위한 코드를 넣어본다.

아래는 $.ajax 로 전송된 모든 값을 출력하는 자바 코드이다.

Enumeration<?> eParam = request.getParameterNames();
while (eParam.hasMoreElements()) {
	String pName = (String)eParam.nextElement();
	String pValue = request.getParameter(pName);
	System.out.println(pName + " : " + pValue);
}

결과화면을 보자.

serialize 로 url 파라미터를 만들고 json 객체로 변환한 후 $.ajax 로 데이터를 전송했다.

자바 스프링으로 구성된 서버에서 데이터를 잘 받고 있는 것을 볼 수 있다.

전체코드

위에서는 부분부분 언급한 부분을 이해했다면 아래의 전체코드를 보면 이해가 쉬울 것이다.

왜 이런 번거로운 작업을 하는지는 이유는 하나이다.

json으로 변경하지 않아도 $.ajax 로 데이터 전송은 가능하다.

데이터를 전송하기 위해 serialize 하여 url 파라미터로 만들었지만, 어떠한 상황에서 값을 변경할 필요가 있다.

서버로 데이터를 전송하기 전에 데이터를 가공할 필요가 있을 경우에 json 객체로 변환하여 사용한다면 수월한 면이 있다.

코딩이 조금은 귀찮을 따름이다.

html 자바스크립트코드

html 코드는 form 태그와 함께 jquery 를 가져왔다.

serialize 와 JSON.parse 를 이용하여 데이터 형태를 JSON 객체로 만들고 $.ajax 를 이용하여 서버로 데이터를 전송한다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<title>테스트</title>
	</head>
	<body>
		<div>
			<div>
				${serverTime}
			</div>
			<form name="sndForm">
				<input type="text" name="txtA" value="a">
				<input type="text" name="txtB" value="b">
				<input type="text" name="txtC" value="c">
			</form>
			<input type="button" name="sndButton" value="전송">
			<div>
				<p id="resultCode"></p>
				<p id="resultMessage"></p>
			</div>
		</div>
	</body>
	<!-- jQuery -->
	<script type="text/javascript" src="/resources/js/jquery-3.6.1.min.js"></script>
	<script>
		$(document).ready( function() { 
			/* without resources */ 
		});
		$(window).on('load', function() { 
			/* with resources */
			
			$("input:button[name=\"sndButton\"]").on('click',function(){
				fnSendData();
		    });
		});
	</script>
	
	<script>
		var fnSendData = function() {
			var formData = $("form[name=\"sndForm\"]").serialize();
			formData = JSON.parse('{"' + decodeURI(formData.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
			console.log(formData);
			
			var queryObj = {
					type: "post", dataType: "json", async: false,
					url: "/ztest/getparameter",
					data: formData
			};
			
			$.ajax({
				url : queryObj.url, type : queryObj.type, dataType : queryObj.dataType, data : queryObj.data, async : queryObj.async,
				beforeSend: function( xhr, settings ) {
					console.log( xhr );
					console.log( settings );
					console.log( settings.data );
				},
				error: function(xhr, status, error){ console.log("에러", xhr, status, error, (xhr.responseText).replace(/<[^>]*>?/g, '') ); },
				success : function(data){ 
					console.log(data);
					$("#resultCode").text( data.code );
					$("#resultMessage").text( data.message );
				}
			});
		}
	</script>
</html>

자바 스프링 코드

서버로 사용한 자바 스프링 코드에서는 데이터를 받고 출력하고 있다.

request.getParameter 메서드와 request.getParameterNames 메서드를 사용하여 전송받은 데이터를 출력하도록 하였다.

request.getParameter 는 key 값을 지정하여 화면에 값을 출력한다.

request.getParameterName 는 전송받은 모든 값을 출력할 수 있는 열거형의 데이터이다.

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.Locale;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.json.simple.JSONObject;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

/**
 * Handles requests for the application home page.
 */
@Controller
public class zTestController {
	
	/** private static final Logger logger = LoggerFactory.getLogger(HomeController.class); */
	
	/**
	 * Simply selects the home view to render by returning its name.
	 */
	@RequestMapping(value = "/ztest/pageGetParam", method = RequestMethod.GET)
	public String PageGetParam(Locale locale, Model model) {
		/** logger.info("Welcome home! The client locale is {}.", locale); */
		
		Date date = new Date();
		DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
		
		String formattedDate = dateFormat.format(date);
		
		model.addAttribute("serverTime", formattedDate );
		
		return "ztest/getParam";
	}
	
	/**
	 * get-parameter 테스트
	 * https://jsonformatter.curiousconcept.com/
	 */
	@RequestMapping(value = "/ztest/getparameter", method = {RequestMethod.POST, RequestMethod.GET})
	public ResponseEntity<String> GetParameter(Locale locale, Model model, HttpServletRequest request) {
		
		//--------------------------------------------------
		String vReturnText = "";
		zTestModel vModel = null;
		
		//--------------------------------------------------
		HttpHeaders responseHeaders = new HttpHeaders();
		responseHeaders.add("Content-Type", "text/html; charset=UTF-8");
		
		//--------------------------------------------------
		Map<String, Object> vReturnMessage = new HashMap<String, Object>();
		vReturnMessage.put("code", "SUCCESS");
		vReturnMessage.put("message", String.format("작업이 성공하였습니다.", ""));
		vReturnText = JSONObject.toJSONString(vReturnMessage);
		
		//--------------------------------------------------
		Date date = new Date();
		SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddHHmmssSSS");
		String vNo = simpleDateFormat.format(date);
		
		//--------------------------------------------------
		try {
			
			System.out.println("--------------------------------------------------");
			
			String vReqTxt = request.getParameter("txtA");
			System.out.println(vReqTxt);
			
			System.out.println("--------------------------------------------------");
			
			Enumeration<?> eParam = request.getParameterNames();
			while (eParam.hasMoreElements()) {
				String pName = (String)eParam.nextElement();
				String pValue = request.getParameter(pName);
				System.out.println(pName + " : " + pValue);
			}
			
			System.out.println("--------------------------------------------------");
			
		} catch (Exception ex) {
			vReturnMessage.put("code", "EXCEPTION");
			vReturnMessage.put("message", String.format("예외가 발생하였습니다.", ""));
			vReturnMessage.put("messageDetail", String.format("%s", ex.getMessage()));
			
			//--------------------------------------------------
			vReturnText = JSONObject.toJSONString(vReturnMessage);
		}
		
		//--------------------------------------------------
		//vReturnText = JSONObject.toJSONString(vReturnMessage);
		
		//--------------------------------------------------
		System.out.println(vReturnText);
		return new ResponseEntity<String>(vReturnText, responseHeaders, HttpStatus.CREATED);
	}
	
}
반응형
저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

자바스크립트 화살표 함수 뜻과 의미 = () => arrow function  (0) 2023.01.28
자바스크립트 파일 정보 읽기 input type file  (0) 2023.01.17
자바 스프링 html input 태그의 입력값 서버로 데이터 전송하기 jquery serialize 메서드 사용  (0) 2023.01.09
자바 스프링 데이터 전송값 모두 확인하는 방법  (0) 2023.01.06
자바스크립트 라디오 버튼 값 가져오기 Get value of selected radio button  (0) 2022.12.25

관련글

댓글

티스토리툴바