jQuery ajax를 이용해서 입력 폼 데이터 전송
구로디지털
오엔제이프로그래밍실무교육센터
1. 각각의 입력객체에서 value 속성으로 가지고 온 뒤 URL 생성
$(‘#myForm’).submit(function (event) {
var name = $(‘#name’).val();
var tel = $(‘#tel’).val();
var name = $(‘#name’).val();
var tel = $(‘#tel’).val();
//Ajax Call
var url = ‘/ajax.AjaxAction?name=‘ + name + ‘&tel=‘ + tel;
$(‘#onj’).load(url);
//기본 이벤트 제거
event.preventDefault();
});
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>
<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 };
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>
//기본 이벤트 제거
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>
//$(‘#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>
[개강확정강좌]오라클자바커뮤니티에서 운영하는 개발자 전문교육 ,개인80%환급(www.onjprogramming.co.kr)
[주간]
[11/4]Spring3.X, MyBatis, Hibernate실무과정
[11/6]SQL초보에서실전전문가까지
[평일야간]
[11/1]C#,ASP.NET마스터
[11/5]iPhone 하이브리드 앱 개발 실무과정
[11/7]JAVA&WEB프레임워크실무과정
[11/8]Spring3.X, MyBatis, Hibernate실무과정
[주말]
[11/9]C#,ASP.NET마스터
[11/9]JAVA&WEB프레임워크실무과정
[11/9]안드로이드개발자과정
[11/9]웹퍼블리싱 마스터
[11/9]Spring3.X, MyBatis, Hibernate실무과정
 | |||||
|---|---|---|---|---|---|
[취업확정]오라클자바개발잘하는신입뽑기2개월
 |
총 | 40일 | 320시간 | 11-13 | |
 | |||||
| 웹퍼블리싱
마스터 |
총 | 14일 | 42시간 | 11-05 | |
 | |||||
| 웹퍼블리싱
마스터 |
총 | 6일 | 42시간 | 11-09 | |
댓글 없음:
댓글 쓰기