Ajax 폼 데이터를 쿼리 스트링으로 변환 serialize()
var form_data=$('form').serialize();
serialize()
폼 엘리먼트의 값을 쿼리 스트링으로 변환한다.
키/값의 쌍 형태의 문자열로 구성되는데 이를 쿼리 스트링이라고 한다.
seq=1&username=pinksung&password=1234&hobby=music&hobby=reading
예제1) exam11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 데이터를 쿼리 스트링으로 변환</title>
<style>
fieldset{width:700px;}
li{list-style:none;}
label{display:inline-block;width:200px;text-align:right;padding-right:10px;}
.submit_li{text-align:right;}
.checkbox li{display:inline; }
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
$('#submit').click(function(){
var data = $('form').serialize();
$('#result').text(data);
});
});
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>폼 데이터를 쿼리 스트링으로 변환</legend>
<input type="hidden" name="seq" value="1" />
<ul>
<li><label>이름을 입력하세요: </label><input type="text" name="name" /></li>
<li><label>비밀번호를 입력하세요: </label><input type="password" class="password" /></li>
<li><ul class="checkbox">
<li><input type="checkbox" name="hobby" value="music" />음악</li>
<li><input type="checkbox" name="hobby" value="yoga" />요가</li>
<li><input type="checkbox" name="hobby" value="reading" />독서</li>
</ul>
</li>
<li class="submit_li"><input type="button" id="submit" value="전송" /></li>
</ul>
</fieldset>
</form>
<div id="result"></div>
</body>
</html>
엘리먼트 형식의 값을 배열 형태로 변환 serializeArray()
var form_data=$('form').serializeArray();
serializeArray()
폼 엘리먼트의 값을 객체 배열로 변환한다.
객체 배열은 {name=value}의 Array 형태
[ Object { name="seq", value="1"},
Object { name="username", value="subean"},
Object { name="password", value="4321"},
Object { name="hobby", value="yoga"} ]
예제2) exam12.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘리먼트 형식의 값을 배열 형태로 변환</title>
<style>
fieldset{width:700px;}
li{list-style:none;}
label{display:inline-block;width:200px;text-align:right;padding-right:10px;}
.submit_li{text-align:right;}
.checkbox li{display:inline; }
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#result').empty();
var data = $('form').serializeArray();
$.each(data, function(index, object){
$('#result').append(object.name + " = " + object.value+"<br />");
})
});
});
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>엘리먼트 형식의 값을 배열 형태로 변환</legend>
<input type="hidden" name="seq" value="1" />
<ul>
<li><label>이름을 입력하세요: </label><input type="text" name="name" /></li>
<li><label>비밀번호를 입력하세요: </label><input type="password" class="password" /></li>
<li><ul class="checkbox">
<li><input type="checkbox" name="hobby" value="music" />음악</li>
<li><input type="checkbox" name="hobby" value="yoga" />요가</li>
<li><input type="checkbox" name="hobby" value="reading" />독서</li>
</ul>
</li>
<li class="submit_li"><input type="button" id="submit" value="전송" /></li>
</ul>
</fieldset>
</form>
<div id="result"></div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| 2. 제이쿼리 문법 기초: attr(), 클래스명 바꾸기 (0) | 2017.08.24 |
|---|---|
| 1. 제이쿼리 문법 기초 (0) | 2017.08.24 |
| Ajax에서 스크립트 로드하기 $.getScript() (0) | 2016.03.22 |
| Ajax로 JSON 이용하기 (3) | 2016.03.21 |
| JQuary로 Ajax 구현하기 (0) | 2016.03.21 |
