-
[jQuery] 25. AJAX load - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:29jQuery - AJAX load() Method1. jQuery load() Methodload() 메소드는 간단하면서도 강력한 AJAX 메소드 입니다.load() 메소드는 서버로 부터 데이터를 로드하고, 선택된 요소에 반환된 값을 넣습니다.문법:$(selector).load(URL,data,callback);필수적인 URL 파라미터는 로드를 원하는 URL을 명시합니다.선택적인 data 파라미터는 요구와 함께 보내지는 키 / 값 쌍의 일련의 질의 문자열을 명시합니다.선택적인 callback 파라미터는 load() 메소드가 끝나고 난 뒤 실행될 함수의 이름입니다.아래 "demo_test.txt"라는 텍스트 예제 파일이 있습니다.<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>아래 예제는 demo.txt의 내용을 불러와 <div>에 명시하는 예제입니다.123456789101112131415161718192021<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){$("#div1").load("demo.txt");});});</script></head><body><div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div><button>Get External Content</button></body></html>cs 또한, URL 파라미터에 jQuery 선택자를 추가할 수 있습니다.12$("#div1").load("demo_test.txt #p1");cs 선택적인 callback 파라미터는 다른 파라미터를 갖을 수 있습니다:- responseTxt: 호출이 성공할 시, 결과 내용을 포함- statusTxt: 호출 상태를 포함- xhr: XMLHttpRequest 객체를 포함아래 예제는 load() 메소드가 완료되고 난 뒤, 알림창을 화면에 띄우는 예제입니다.load() 메소드가 성공하면, 화면은 "External content loaded successfully!"를 띄우고,실패하면, 에러 메세지를 출력합니다.1234567891011121314151617181920212223242526<!DOCTYPE html><html><head><script>$(document).ready(function(){$("button").click(function(){$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){if(statusTxt == "success")alert("External content loaded successfully!");if(statusTxt == "error")alert("Error: " + xhr.status + ": " + xhr.statusText);});});});</script></head><body><div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div><button>Get External Content</button></body></html>cs 'Web > jQuery' 카테고리의 다른 글
[jQuery] jQ Mobile 시작하기 - jQuery Mobile 강좌 (0) 2016.03.16 [jQuery] 27. noConflict Method - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 26. AJAX get / post - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 24. AJAX - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 23. Filtering - jQuery 강좌 jQuery / CSE (0) 2015.06.13 [jQuery] 22. Siblings - jQuery 강좌 jQuery / CSE (0) 2015.06.13
