| 09.submitMethod.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>폼에 있는 값을 서버로 전송하기</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ /*submit(기존)방식에서 $('#btn').click(function() {
$('#pnlDisplay').load("05.FrmResponseData.aspx",
$('input[@name="msg"]').val());*/ //Ajax방식 $('#btn').click(function() { $('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg':
$('#msg').val() }); });
});
</script> </head> <body>
<div id="frmSend">
<form action="05.FrmResponseData.aspx">
<input type="text" name="msg" value="" id="msg" />
<input type="submit" value="전송" />
</form>
</div>
<input type="button" id="btn" value="Ajax방식" />
<div id="pnlDisplay">
여기에 출력
</div> </body> </html> |
| 결과확인 |
[그림64-1] |
| 기타설명 |
| - 로드 메서드를 사용해서 데이터를 가져와 사용할 때 텍스트박스에 입력 한값을 5번파일로 서버로 전송하는데 이 값을 받아서 로드시킨다. - #temp가 없지만 내부적으로 submit매서드가 발생되어 서버에 데이터를 전송하는데 전송한 데이터를 로드하여 볼수있다. - 동적으로 읽어 페이지 이동이 없이 출력 - 기존(submit) 방식을 사용한다면 클릭이벤트 의미가 없다. 05.FrmResponseData.aspx"로 이동해서 확인한다. - ajax방식은 내부적으로 전송해서 그 값을 원하는 위치에 출력 (웹브라우저 내부로 동적으로) |
09.submitMethod.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 66.jQuery - getJSON 대체 ajax ( 09.Ajax ) (0) | 2009.11.17 |
|---|---|
| 65.jQuery - getScript 대체 ajax ( 09.Ajax ) (0) | 2009.11.17 |
| 63.jQuery - load방식으로 서버에 데이터 전송 및 출력 ( 09.Ajax ) (3) | 2009.11.13 |
| 62.jQuery - post 방식으로 서버에 데이터 전송 및 출력하기 ( 09.Ajax ) (0) | 2009.11.13 |
| 61.jQuery - get방식으로 서버에 데이터 전송 및 출력하기 ( 09.Ajax ) (0) | 2009.11.13 |
Comments