본문 바로가기
programming/javascript

자바 스프링 html input 태그의 입력값 서버로 데이터 전송하기 jquery serialize 메서드 사용

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

jqeury 의 serialize 메서드를 사용하면 서버로 데이터를 전송하는데 편하다. serialize 메서드는 form 태그 내부의 input 태그의 값들을 name 과 value 속성을 이용해 데이터를 구성하는 역할을 해 준다. 전송 데이터 형태는 name=value 이며, url 의 전송 파라미터와 같다. 단, serialize 메서드 사용시 form 태그를 사용해야 동작을 한다.

자바 스프링 html input 태그의 입력값 서버로 데이터 전송하기
jquery serialize 메서드 사용

웹페이지에서 비동기 형태로 데이터를 전송하는 것은 여러모로 이점이 크다.

먼저, 화면의 깜빡임이 없어서 좋고, 특정 부분만 데이터를 갱신시킬 수 있다.

form 태그와 함께 jquery의 serialize 메서드를 사용하면 서버에 편하게 비동기 형태의 ajax 로 데이터를 전송할 수 있다.

자바스크립트 동기 비동기 동작 방식 이해

자바스크립트로 웹페이지의 동작이나 데이터를 표시할 때 동기와 비동기적인 처리를 한다. jquery를 사용할 경우 비동기는 기본값으로 동작한다. 동기와 비동기는 여러 개의 자바스크립트가 직

lngnat.tistory.com

데이터 전송 방법

jquery 의 serialize 메서드를 사용하여 데이터를 전송하려면 html 의 form 태그를 사용해야 한다.

form 태그가 아닌 다른 div 태그 등을 사용하여 입력태그의 데이터를 전송하려고 한다면 실행되지 않는다.

form 태그 내부에 입력 데이터인 input 태그를 작성하고 데이터를 입력해 준다. 이것을 jquery 의 serialize 메서드를 사용하여 데이터를 구성하고 서버로 전송하면 된다.

아래는 데이터를 전송하는 방법을 나열한 것이다.

  1. form 태그에 input 태그를 작성한다.
  2. jquery 라이브러리를 가져온다
  3. serialize 메서드 사용
  4. ajax 로 전송한다.
  5. 서버에서 확인한다.

전체 코드는 화면 가장 하단에 있다. 참고해 본다.

form 태그 구성하기

먼저 form 태그에 입력태그를 구성해 본다.

입력태그는 input 태그를 나타내는 것으로 type 속성을 이용하여 텍스트부터 선택목록 까지 다양하게 구성할 수 있다.

여기서는 기본적인 텍스트만을 이용하여 구성하고 input 태그에 입력된 텍스트를 서버로 전송할 것이다.

form 태그에 구성할 input 태그의 구성은 다음과 같다.

value 속성에 임의로 값을 넣었다. 테스트시 일일히 타자치기 귀찮아서 강제로 넣은 것이다.

input 태그의 name 속성과 value 속성은 serialize 메서드를 통해 서버에 보내지는 전송 파라미터로 구성된다.

<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>

jqeury 라이브러리 가져오기

jquery 는 자바스크립트를 좀 더 편하게 사용하기 위한 라이브러리이다.

form 태그 내의 입력태그인 input 태그의 값을 서버에 전송하기 위해 serialize 메서드를 사용하기 위해 필요하다.

아래는 jqeury를 가져오는 방법이다.

공식 홈페이지에서 jqeury 를 다운받아 사용할 수 있으며, CDN을 통해 연결하여 사용할 수도 있다.

<!-- 다운받은 jquery 사용 -->
<script type="text/javascript" src="/resources/js/jquery-3.6.1.min.js"></script>

<!-- 구글 CDN 사용 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

serialize 메서드 사용

serialize 메서드는 jqeury 라이브러리에 있는 메서드로 form 태그 내부에 구성된 input 태그의 값을 전송 데이터로 구성해 준다.

input 태그 속성인 name 과 value 속성을 이용하여 파라미터를 만들거나 또는 json 데이터로 만들어 준다.

아래는 serialize 메서드를 사용하여 데이터를 구성하는 코드이다.

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

jquery ajax 전송하기

jquery 라이브러리의 $.ajax 를 사용하여 비동기로 서버에 데이터를 전송할 것이다.

$.ajax 설정값 중 data 항목에 serialize 메서드를 사용하여 구성한 데이터를 설정하면 된다.

아래는 구성된 데이터를 설정하는 코드이다.

쓸데없이 데이터 객체 2개를 만들었지만, 그려려니 하자.

디버그용도로 이것저것 테스트하다보니 이런 꼴이 되었다.

중요한 것은 formData 부분만 보면 된다.

var queryObj = {
		type: "post",
        dataType: "json",
        async: true,
		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 );
	}
});

전송된 데이터 값 확인하기

URL에 지정된 서버주소로 데이터를 전송하여 보내준다.

값이 어떻게 나타나는지 전체 값을 확인해 보면 금방 알 수 있다.

전송되는 값은 name=value 형식의 연속적인 데이터이기 때문에 Enumeration 을 사용하여 확인할 수 있다.

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

전체코드

위의 과정에 대한 전체 코드는 다음과 같다.

첫번째는 HTML 에 대한 전체 코드이며 form 태그의 구성과 jquery 자바스크립트를 이용해 서버로 데이터를 전송하는 것까지의 코드이다.

다시봐도 냄새나는 코드이다.

중요한 부분은 html 부분의 form 태그와 jquery 의 serialize 메서드를 사용하는 부분이다.

<%@ 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>테스트 - KeyRadar</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();
			
			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>

두번째는 자바 스프링에서 값을 받고 전체적으로 출력하는 것을 보여준다.

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' 카테고리의 다른 글

자바스크립트 파일 정보 읽기 input type file  (0) 2023.01.17
자바 스프링 url 파라미터 json 객체로 변환하기  (0) 2023.01.10
자바 스프링 데이터 전송값 모두 확인하는 방법  (0) 2023.01.06
자바스크립트 라디오 버튼 값 가져오기 Get value of selected radio button  (0) 2022.12.25
자바스립트 알림창 제목 표시하기 타이틀 문자열 지정 jquery ui 사용  (0) 2022.12.24

관련글

댓글

티스토리툴바