:: 글답변 :: 이 름 패스워드 이메일 홈페이지 옵 션 html  분 류 선택하세요 Html CSS Script JQuery ASP PHP GNU .NET MySQL MsSQL DNS SEO ENG IONIC REACT 제 목 > > > [동시 작동은 안될듯, 그냥 복사했음] > > 01.HtmlSamplePage.htm > > <div> > <h3>샘플 페이지</h3> > <div> > 샘플 페이지입니다. > </div> > </div> > > ------------------------------------- > > <title>동적으로 원격 페이지 로드</title> > > <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script> > <script type="text/javascript"> > $(document).ready(function () { > $("#btn .btnLoad").click(function() { > $('#ctlGrid').load("01.HtmlSamplePage.htm"); // 비동기적으로 페이지로드 > window.alert("이 메시지는 먼저 출력됨. Why? 비동기."); // 메시지박스가 먼저 출력 가능 > }); > }); > </script> > > <div id="btn"><div class="btnLoad">HTML읽어오기 버튼</div></div> > <div id="ctlGrid"></div> > > ------------------------------------ > > <title>비동기적으로 JSON파일 로드</title> > > <script type="text/javascript"> > $(document).ready(function () { > $("#btn .btnLoad").click(function () { > $.getJSON("02.jQuery.getJSON.js", function (data) { > $('#pnlDisplay').empty(); // 패널(div)의 내용 초기화 > var table = "<table border='1'><tr><td>인덱스</td><td>번호</td><td>이름</td></tr>"; > // data를 탐색 : each() 메서드를 사용해서 데이터가 있는만큼 반복 > $.each(data, function (index, entry) { > table += '<tr>'; > table += '<td>' + index + '</td>'; > table += '<td>' + entry["Num"] + '</td>'; > if (entry["Name"]) { // 특정 필드를 비교할 때 이러한 표현법 사용 > table += '<td>' + entry["Name"] + '</td>'; > } > table += '</tr>'; > }); > table += "</table>"; > $('#pnlDisplay').append(table); // 패널에 추가하기 > }); > }); > }); > </script> > <div id="btn"><div class="btnLoad">HTML읽어오기</div></div> > <div id="pnlDisplay"></div> > > --------------------------------------- > > <title>하나의 완성된 자바스크립트 파일을 동적 로드/실행</title> > > <script type="text/javascript"> > $(document).ready(function () { > $("#btn").click(function () { > // 아래 코드가 실행되는 시점에 js 파일의 기능 실행됨 > $.getScript('03.jQuery.getScript.js'); > }); > }); > </script> > <input type="button" id="btn" value="표그리기" /> > <div id="ctlGrid"></div> > > ------------------------------------- > > <title>XML파일 로드하기</title> > > <script type="text/javascript"> > $(document).ready(function () { > $("#btn").click(function () { > $.get('04.Company.xml', function (data) { > $('#ctlGrid').empty(); > $(data).find('Company').each(function () { > var $entry = $(this); // 현재 시점의 레코드셋 > // 특성(Attribute)을 읽어오기 > var html = "<div>" + $entry.attr('CompanyType') + "</div>"; // Private > // 하위 엘리먼트 읽어오기 > html += "<div>" + $entry.find("CompanyName").text() + "</div>"; // 닷넷코리아 > $('#ctlGrid').append($(html)); > }); > }); > }); > }); > </script> > <input type="button" id="btn" value="회사소개" /> > <div id="ctlGrid"></div> > > ---------------------------------- > > <title>get 방식으로 서버에 데이터 전송 및 받기</title> > > <script type="text/javascript"> > $(document).ready(function () { > $('#btn').click(function () { > $.get( > "05.FrmResponseData.aspx", //[1] 서버측 스크립트 언어 : ASP.NET, JSP, PHP > {'Msg': $(this).val() }, //[2] 쿼리스트링 : ?키1=값1&키2=값2 > function (data) { //[3] 콜백함수 : 결과값 받기, data로 받아옴 > $('#pnlDisplay').html(data); > } > ); // end $.get() > }); > }); > </script> > <input type="button" id="btn" value="서버로부터 HTML 가져오기" /> > <div id="pnlDisplay">여기에 출력</div> > > ---------------------------------- > > <title>post 방식으로 서버에 데이터 전송 및 받기</title> > > <script type="text/javascript"> > $(document).ready(function () { > $('#btn').click(function () { > $.post("05.FrmResponseData.aspx", { 'Msg': 'Post방식으로전송' }, function (data) { > $('#pnlDisplay').html(data); > }); > }); > }); > </script> > <input type="button" id="btn" value="서버로부터 HTML 가져오기" /> > <div id="pnlDisplay">여기에 출력</div> > > ---------------------------------- > > <title>load 메서드로 서버에 데이터 전송 및 받기</title> > > <script type="text/javascript"> > $(document).ready(function () { > $('#btn').click(function () { > $('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $(this).val() }); > }); > }); > </script> > <input type="button" id="btn" value="서버로부터 HTML 가져오기" /> > <div id="pnlDisplay">여기에 출력</div> > > --------------------------------- > > <title>폼에 있는 값을 서버로 전송하기</title> > > <script type="text/javascript"> > $(document).ready(function () { > $('#btn').click(function () { > $('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $('#msg').val() }); > }); > }); > </script> > <div id="frmSend"> > <form action="05.FrmResponseData.aspx"> > <input type="text" name="msg" value="" id="msg" /> > <input type="submit" value="전송" /> > </form> > </div> > <hr /> > <input type="button" id="btn" value="Ajax방식" /> > <div id="pnlDisplay">여기에 출력</div> > > --------------------------------- > > <title>getScript()메서드의 기능을 ajax()메서드로 대체</title> > > <script type="text/javascript"> > $(document).ready(function () { > $.ajax({ > type: "get", > url: "10.jQuery.ajax.js", > dataType: "script", > success: function (data) { MessageBox('안녕'); }, > error: function (data) { alert('에러 발생'); } > }); > }); > </script> > > ----------------------------------- > > <title>getJSON()을 대체하는 ajax() 메서드</title> > > <script type="text/javascript"> > $(document).ready(function () { > // 동적으로 원격에 있는 JSON 파일(결과값)을 로드 > $.ajax({ > url: "02.jQuery.getJSON.js", // a.aspx, a.php, a.jsp > dataType: "json", > success: function (data) { > // 받아온 JSON을 테이블에 출력 > $.each(data, function () { > $('#tblList').append("<tr><td>" + this.Num + "</td><td>" > + this["Name"] + "</td></tr>"); > }); > $.each(data, function (index, entry) { > $('#tblList').append("<tr><td>" + entry.Num + "</td><td>" > + entry["Name"] + "</td></tr>"); > }); > }, > error: function () { alert("에러발생"); } > }); > }); > </script> > <table id="tblList" border="1"></table> > > ------------------------------ > > <title>반복사용하는 ajax() 메서드의 주요 속성을 ajaxSetup()에서 설정</title> > <style type="text/css"> > .yellow { background-color:Yellow; } > .Lime { background-color:Lime; } > </style> > > <script type="text/javascript"> > $(document).ready(function () { > // $.ajax()에서 반복 사용하는 속성을 상단에 설정 후 $.ajax에서 상속받아 사용 > $.ajaxSetup({ > url: "02.jQuery.getJSON.js", > dataType: "json" > }); > $.ajax({ > success: function (data) { > $.each(data, function () { > $('#tblList').append("<tr><td>" + this.Num + "</td><td>" > + this["Name"] + "</td></tr>"); > }); > $('table:first tr:odd').addClass('yellow'); > $('table:first tr:even').addClass('Lime'); > } > }); > $.ajax({ > success: function (data) { > $.each(data, function () { > $('#tblList2').append("<tr><td>" + this.Num + "</td><td>" > + this["Name"] + "</td></tr>"); > }); > $('table:last tr:odd').addClass('yellow'); > $('table:last tr:even').addClass('Lime'); > } > }); > }); > </script> > > <table id="tblList" border="1"></table> > <table id="tblList2" border="1"></table> > 링크 #1 링크 #2 파일첨부   왼쪽의 글자를 입력하세요.