자바스크립트 jQuery Form 데이터 배열, 쿼리 형식으로 전송하기

텍스트 박스에 입력한 값을 jQuery를 사용해 처리할 로직에 전달해야 하는 경우가 많습니다.

또는 체크박스나 라디오 버튼등 입력할 수 있는 항목이 많은 경우도 있습니다.

로직은 자바나 PHP 등등 따로 만들어 놓은 경우가 많기 때문에 POST 또는 GET으로 전송합니다.

이렇게 로직 부분에 입력한 값을 전송할때 항목이 여러 개일 경우 배열로 전송하면 값을 취득하기 편리합니다.

serializeArray 배열 형식
serialize 쿼리 형식
정리

serializeArray 배열 형식

serializeArray를 사용하면 데이터를 전송할 때 배열 형태로 전송을 할 수 있습니다.

예제를 보면서 사용방법을 보도록 하겠습니다.

사용방법을 확인하기 위해 텍스트 박스 형태로만 입력란을 만들었습니다.

입력란은 form으로 감싸줘야 합니다.

<form action="send">
	<input type="text" name="user" placeholder="이름"><br>
	<input type="text" name="gender" placeholder="성별"><br>
	<input type="text" name="address" placeholder="주소"><br>
	<input type="text" name="mail" placeholder="e-mail"><br>
	<button type="submit" name="action" value="send">Submit</button>
</form>

Submit 버튼을 누르면 동작할 스크립트 부분입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	$('form').submit(function(event) {
		event.preventDefault();
		var param = $(this).serializeArray();
		console.log(param);
	});
});
</script>

스크립트를 복사해서 </form> 아래에 넣어주면 동작을 확인할 수 있습니다.

결과

배열 형태로 값이 만들어졌습니다.

많은 데이터를 전송해 서버 사이드에서 처리해야 할 때 편리하게 사용할 수 있습니다.

serialize 쿼리 형식

serialize를 사용해 쿼리 형식으로 값을 전송하는 방법을 보겠습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	$('form').submit(function(event) {
		event.preventDefault();
		var param = $(this).serialize();
		console.log(param);
	});
});
</script>

결과