jQuery ajax를 이용해서 입력 폼 데이터 전송. [jquery학원, 제이쿼리학원, jquery교육] 구로디지털 오엔제이프로그래밍실무교육센터

jQuery ajax를 이용해서 입력 폼 데이터 전송. [jquery학원, 제이쿼리학원, jquery교육]

 

구로디지털 오엔제이프로그래밍실무교육센터

www.onjprogramming.co.kr

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.oraclejavanew.kr/bbs/board.php?bo_table=LecAJAX&wr_id=97

[개강임박강좌, 오프라인교육장에 오시면 보다 자세히 배울 수 있습니다.]

오라클자바커뮤니티에서 운영하는 개발자 전문교육 ,개인80%환급(www.onjprogramming.co.kr)

[주간]
  [11/18]Spring3.X, MyBatis, Hibernate실무과정
  [11/18]iPhone 하이브리드 앱 개발 실무과정
  [11/20]SQL초보에서실전전문가까지
  [11/20]안드로이드개발자과정


[평일야간]
  [11/19]iPhone하이브리드앱개발실무과정
  [11/19]안드로이드개발자과정
  [11/21]JAVA&WEB프레임워자실무과정
  [11/21]Spring3.X, MyBatis, Hibernate실무과정
  [11/27]SQL초보에서실전전문가까지

[주말]
  [11/16]JAVA&WEB프레임워크실무과정
  [11/16]웹퍼블리싱 마스터
  [11/23]SQL초보에서전문가까지
  [11/23]C#,ASP.NET마스터
  [11/30]PL/SQL,오라클힌트,SQL튜닝,사례연구
  [11/31]Spring3.X,MyBatis,Hibernate실무과정