썩구노트

serialize()를 이용한 ajax Form 데이타 전송하기 본문

카테고리 없음

serialize()를 이용한 ajax Form 데이타 전송하기

양석규 2017. 1. 3. 16:25

serialize() 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.

serialize()를 이용하면 일일이 fname=값&femail=값&sex=값&job=값 이렇게 안해주어되 됩니다.


serialize()를 사용하지 않고 파라미터값을  전달시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<form name="formname1" id="formname1" style="margin:0px;">
<div>
    <label for="fname">이름</label>
        :
    <input type="text" name="fname" id="fname" value="C.m.A" />
</div>
 <div>
    <label for="femail">이메일</label>
    :
    <input type="text" name="femail" id="femail" value="" />
</div>
<div>
    <label for="sex">성별</label>
    :
    <input type="radio" name="sex" value="0" />여자
    <input type="radio" name="sex" value="1" checked="checked" />남자
 </div>
<div>
    <label for="job">직업</label>
    :
    <select name="job" id="job">
    <option value="직업1">직업1</option>
    <option value="직업2">직업2</option>
    <option value="직업3">직업3</option>
    </select>
 </div>
</form>
라고 했을때 serialize()를 사용하지 않고 파라미터값을  전달시
 
fname=값&femail=값&sex=값&job=값
또는
var params = {
    fname       : '값',
    femail : '값',
    sex    : '값',
    job : '값'
};


serialize() 사용하기

var params = jQuery("#폼명").serialize() 또는 var params = $("#폼명").serialize()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
function formSubmit() {
    var params = jQuery("#formname1").serialize(); // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.
    jQuery.ajax({
        url: '샘플ajax.php',
        type: 'POST',
        data:params,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
        dataType: 'html',
        success: function (result) {
            if (result){
                // 데이타 성공일때 이벤트 작성
            }
        }
    });
}
</script>
 
<form name="formname1" id="formname1" style="margin:0px;">
<div>
    <label for="fname">이름</label>
        :
    <input type="text" name="fname" id="fname" value="C.m.A" />
</div>
 <div>
    <label for="femail">이메일</label>
    :
    <input type="text" name="femail" id="femail" value="" />
</div>
<div>
    <label for="sex">성별</label>
    :
    <input type="radio" name="sex" value="0" />여자
    <input type="radio" name="sex" value="1" checked="checked" />남자
 </div>
<div>
    <label for="job">직업</label>
    :
    <select name="job" id="job">
    <option value="직업1">직업1</option>
    <option value="직업2">직업2</option>
    <option value="직업3">직업3</option>
    </select>
 </div>
<div>
       <input type="button" value="Ajax 폼 전송" onclick="formSubmit()" />
 </div>
</form>