jQuery | javascript | CSS

64.jQuery - 폼에 있는값을 서버로 전송하기 ( 09.Ajax )

Godffs 2009. 11. 13. 13:58
반응형
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방식은 내부적으로 전송해서 그 값을 원하는 위치에 출력
   (웹브라우저 내부로 동적으로)



반응형