<input type="button" id="click" value="클릭"> <div id="log"></div> <script> // $.ajax() 메서드를 이용한다. $(document).ajaxStart(function(){ $("#log").text("로딩 중..."); }).ajaxStop(function() { $("#log").hide(); }) $("#click").click( function() { $.ajax({ // 요청할 URL url: "test.php", // 데이터를 전송한다. Query 문자열로 변환된다. data:{ id: 123 }, // GET 메서드로 호출한다. type: "GET", // 응답 데이터가 json일 것으로 기대한다. dataType: "json", // 요청이 성공했을 경우 처리 코드 success: function(json) { $("<h1 />").text(json.Name).appendTo("body"); $("<div class=\"content\"/>").html(json.email).appendTo("body"); }, // 요청이 실패하면 경고창을 띄운다. error: function(xhr, status) { alert("Sorry, ther was a problem!"); }, }) }); </script>
Copyrights © - Joinc, All Rights Reserved. Inherited From - Yundream Rebranded By - Joonphil
Ajax Start, End 이벤트 처리
에제 코드
<input type="button" id="click" value="클릭"> <div id="log"></div> <script> // $.ajax() 메서드를 이용한다. $(document).ajaxStart(function(){ $("#log").text("로딩 중..."); }).ajaxStop(function() { $("#log").hide(); }) $("#click").click( function() { $.ajax({ // 요청할 URL url: "test.php", // 데이터를 전송한다. Query 문자열로 변환된다. data:{ id: 123 }, // GET 메서드로 호출한다. type: "GET", // 응답 데이터가 json일 것으로 기대한다. dataType: "json", // 요청이 성공했을 경우 처리 코드 success: function(json) { $("<h1 />").text(json.Name).appendTo("body"); $("<div class=\"content\"/>").html(json.email).appendTo("body"); }, // 요청이 실패하면 경고창을 띄운다. error: function(xhr, status) { alert("Sorry, ther was a problem!"); }, }) }); </script>Recent Posts
Archive Posts
Tags