jQuery ajax를 이용해서 입력 폼 데이터 전송하는 방법(제이쿼리강좌)

jQuery ajax를 이용해서 입력 폼 데이터 전송

 

1. 각각의 입력객체에서 value 속성으로 가지고 온 뒤 URL 생성

 

$(‘#myForm’).submit(function (event) {
    var name = $(‘#name’).val();
    var tel = $(‘#tel’).val();

    //Ajax Call
    var url = ‘/ajax.AjaxAction?name=‘ + name + ‘&tel=‘ + tel;
    $(‘#onj’).load(url);

    //기본 이벤트 제거
    event.preventDefault();
});

<tr>
    <td>name :</td> <td><input type=“text” id=“name”/></td>
</tr>
<tr>
    <td>tel :</td> <td><input type=“text” id=“tel”/></td>
</tr>
<div id=“onj></div>

 

2. 각각의 입력객체에서 value 속성으로 가지고 온 뒤 ajax관련 data 속성에 넣음

$(‘#myForm’).submit(function (event) {
    var name = $(‘#name’).val();
    var tel = $(‘#tel’).val();

    //Ajax Call
    var url = ‘/ajax.AjaxAction’;
    var data = { name: name, tel: tel };

    $(‘#onj’).load(url, data);

    //기본 이벤트 제거
    event.preventDefault();
});
<tr>
    <td>name :</td> <td><input type=“text” id=“name”/></td>
</tr>
<tr>
    <td>tel :</td> <td><input type=“text” id=“tel”/></td>
</tr>
<div id=“onj”></div>

3. 각각의 입력양식에 적힌 값을 serialize() 메소드로 쿼리 문자열로 바꿈
4. 각각의 입력양식에 적힌 값을 serialize Array() 메소드로 객체로 바꿔서 전달

$(‘#myForm’).submit(function (event) {
    //Ajax Call
    var url = ‘/ajax.AjaxAction’;

    $(‘#onj’).load(url, $(this).serialize());
    //$(‘#onj’).load(url, $(this).serializeArray());
    // serializeArray가 리턴한 값은 객체이므로 다음과 같은 모양
    [  { name:’name’, value:’OnJ’},
       { name:’tel’,  value:‘8514790’ }  ]

    //기본 이벤트 제거
    event.preventDefault();
});
<tr>
    <td>name :</td> <td><input type=“text” id=“name”/></td>
</tr>
<tr>
    <td>tel :</td> <td><input type=“text” id=“tel”/></td>
</tr>
<div id=“onj”></div>

 

[출처] 오라클자바커뮤니티, 오엔제이프로그래밍실무교육센터

http://www.onjprogramming.co.kr