목차
load() 구문 load() 예제 - 파일 내용 전체 불러오기 load() 예제 - 파일의 특정 부분 불러오기 load() 예제 - 파일 불러온 후 추가로 함수 실행 load() 관련 주소
load() 구문
$("선택자").load( URL data , callback( responseTxt, statusTxt, status, xhr, xhr.status
[매개변수]
URL 필수. 불러올 내용이 있는 파일 주소.
data 선택. URL 파일의 특정 내용을 불러올 선택자.
※ URL 주소 뒤에 한 칸 띄우고 연이어 적어줌.
callback( responseTxt, statusTxt, xhr, xhr.status
선택. 추가로 실행할 함수 (다른 매개변수 가질 수 있음).
※ 참고: load() 메서드로 서버와 통신 시, 결과는 responseTxt, statusTxt, xhr, xhr.status 변수 등에 담겨서 반환되는데, 이 변수들을 callback 함수의 매개변수로 사용 가능.
responseTxt
선택. 서버에 요청 완료 시, 파일의 내용.
statusTxt
선택. 파일 요청 상태 표시. (가능값 종류)
success : 호출 성공.error : 호출 실패.
xhr
선택. 통신 결과를 XMLHttpRequest 객체 형태로 반환.
※ 에러 시, 어떤 에러 내용 반환.
xhr.status
선택. 요청 파일의 상태.
200 403 404 더 자세히 보기
※ test.txt 파일 내용. (= 아작스로 불러올 내용)
<h2>홈짱닷컴</h2>
<p id=" domain ">Homzzang.com</p>
load() 예제 - 파일 내용 전체 불러오기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz"). load ("test.txt");
});
});
</script>
<div id="hz"><h2>여긴 어디?</h2></div>
<button>알려줘!</button>
load() 예제 - 파일의 특정 부분 불러오기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz"). load ("test.txt #domain ");
});
});
</script>
<div id="hz"><h2>여긴 어디?</h2></div>
<button>알려줘!</button>
load() 예제 - 파일 불러온 후 추가로 함수 실행
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#hz"). load ("test.txt", function( responseTxt, statusTxt, xhr, xhr.status ) {
if( statusTxt == " success " && xhr.status == 200) {
alert("알고있지롱. 알려줄게.");
} else {
alert("에러 발생: " + xhr. status + ": " + xhr. statusText );
}
});
});
});
</script>
<div id="hz"><h2>여긴 어디?</h2></div>
<button>알려줘!</button>
※ 에러 발생 상태를 보려면, test.txt 부분을 다르게 임의로 변경.
load() 관련 주소
바위처럼 님 jQuery 84 [ Ajax ] 제이쿼리 - load, $.ajax로 파일 내용 로드하기
https://youtu.be/6560r0EoAoM
