jQuery Tips 가 AJAX 리 셋 함수 에 추가 인 자 를 전달 하 는 방법

구체 적 으로 이 예 를 들 어 우 리 는 button 1 과 button 2 를 클릭 한 후에 AJAX 방식 으로 example.html 의 내용 을 추출 한 다음 에 페이지 의 id=callbackdemo 3 의 div HTML 을 동적 으로 업데이트 하 기 를 바 랍 니 다.

 
<div id="callbackdemo1"> 
<button id="button1">ajax load1</button><br/> 
</div> 
<div id="callbackdemo2"> 
<button id="button2">ajax load2</button><br/> 
</div> 
<div id="callbackdemo3" class="log"></div> 
<button onclick="$('.log').html('');">clear</button>

첫 번 째 방법 은 다음 과 같 습 니 다.가장 간단 한 상황 에 적용 되 고 직관 적 인 방법 입 니 다.바로 ajax 리 셋 함수 에서jQuery 의 id 선택 기$("\#callbackdemo 3〃)를 사용 하여 id 를 callbackdemo 3 의 div 로 얻 은 후 HTML 내용

 
$("#callbackdemo1>#button1").click( 
function load(){ 
$.get("example.html",{ 'param[]': ["var1", "var2"] }, 
function f1(data, textStatus, XMLHttpRequest) 
{ 
$("#callbackdemo3").html(data); 
} 
); 
} 
);

두 번 째 방법 을 업데이트 합 니 다.추가 매개 변 수 를 받 아들 이 는 리 셋 함 수 를 정의 한 다음 기본 리 셋 함수 의 내용 에서 미리 정 의 된 리 셋 함 수 를 호출 하면 추가 매개 변 수 를 전달 하 는 목적 을 달성 할 수 있 습 니 다.첫 번 째 방법 에 비해이 방법 은 각 반전 함수 의 문맥 을 비교적 편리 하 게 이용 할 수 있다.

 
function callback_with_extraParam(data,param) 
{ 
param.html(data); 
} 
$("#callbackdemo2>#button2").click( 
function load(){ 
var extraParam = $("#callbackdemo3") 
$.get("example.html",{ 'param[]': ["var1", "var2"] }, 
function f2(data) 
{ 
callback_with_extraParam(data,extraParam); 
} 
); 
} 
);

추가 매개 변수의 중요성 에 대해 조금 복잡 한 HTML 상황 을 살 펴 보 세 요.우 리 는 button 3 아래 의 div 의 HTML 을 업데이트 하고 싶 습 니 다.이 div 는 id 가 없 으 면 어떻게 합 니까?

 
<div id="callback_complexdemo"> 
<button id="button3">ajax load3</button><br/> 
<button onclick="$('div',$(this).closest('div')).html('');">clear</button><br/> 
<div></div> 
</div>

당연히 사용 합 니 다\#callbackcomplexdemo>div 도 가능 하지만 더 복잡 한 HTML 페이지 라면?id=callback 없 으 면complexdemo 는 요?모자이크 가 깊 은 데?이런 상황 에서 우 리 는 상하 문 파라미터 라 는 특성 을 효과적으로 이용 해 야 한다.click 의 이벤트 처리 함수 load()에서 현재 요소 의 위치 var whereami=$(this)를 편리 하 게 얻 을 수 있 습 니 다.이 whereAmI 는 jQuery 대상 입 니 다.그리고 AJAX 리 셋 함수 f3 에서 whereAmI 즉 점 에 있 는 이 button 을 이용 하여 원 하 는 div 라 는 코드 를 얻 을 수 있 는 방법 을 생각 합 니 다.초보 자 는 알 아 볼 수 없습니다.$('div',$(whereAmI).closest('div')먼저$closestparent_div=$(whereAmI).closest('div')는 whereAmI 의 가장 가 까 운 부모 div 대상 을 조회 한 다음$('div',$closestparent_div)즉,최근 부모 div 대상 이라는 컨 텍스트 에서 내부 div 대상

 
$("#callback_complexdemo>#button3").click( 
function load(){ 
var whereAmI = $(this); 
$.get("example.html",{ 'param[]': ["var1", "var2"] }, 
function f3(data) 
{ 
console.log(whereAmI); 
$('div',$(whereAmI).closest('div')).html(data); 
} 
); 
} 
);

을 찾 습 니 다.이 작은 예 를 통 해 AJAX 리 셋 함수 에 추가 적 인 파 라 메 터 를 전달 하 는 방법 과 실 용적 이 고 중요 한 컨 텍스트 파 라 메 터 를 배 울 수 있 습 니 다.

jQuery Tips 가 AJAX 리 셋 함수 에 추가 인 자 를 전달 하 는 방법

좋은 웹페이지 즐겨찾기