JQuery($.load) 사용 및 분석에 대해 event_jquery

먼저 jquery 로드 메서드는 편의를 위해 jQuery.ajax()를 캡슐화하는 메서드라는 점을 분명히 해야 합니다. 더 복잡한 논리를 처리해야 하는 경우에도 jQuery의 비교를 사용해야 합니다. .ajax() 포괄적인 접근 방식.

load 메소드 호출을 위한 전체 구문 형식: load( url, [data], [callback] )
여기서: url은 가져올 파일의 주소를 나타냅니다.
data: 선택적 매개변수. 로드는 정적 HTML 파일뿐만 아니라 PHP 파일과 같은 동적 스크립트도 가져올 수 있으므로 동적 파일을 가져오려는 경우 여기에 전달할 매개변수를 넣을 수 있습니다.
콜백: 선택적 매개변수로, 로드 메소드를 호출하고 서버로부터 응답을 받은 후 실행되는 또 다른 함수를 의미합니다.

몇 가지 사용 예가 아래에 나와 있습니다.

1. 전달 매개변수가 포함되지 않은 php 파일을 로드합니다.

코드 복사 코드는 다음과 같습니다. :

$("#myID").load("/test.php");//id가 #myID
인 요소에 test.php를 가져온 결과

2. 전달 매개변수가 포함된 PHP 파일을 로드합니다.

코드 복사 코드는 다음과 같습니다.

$("#myID").load("/test.php",{"name":"Adam"});//가져온 PHP 파일에는 전달 매개변수가 포함되어 있습니다. 요청 URL: /test.php?name=Adam

3. 전달된 여러 매개변수가 포함된 PHP 파일을 로드합니다. 참고: 매개변수를 쉼표로 구분하세요.

코드 복사 코드는 다음과 같습니다.

$( "#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"});//가져온 PHP 파일 요청 url:/test.php?name=Adam&site=www.phpernote.com

과 유사한 전달 매개변수를 포함합니다.

4. 배열을 전달 매개변수로 사용하는 PHP 파일 로드

코드 복사 코드는 다음과 같습니다:

$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo. com" ]});//가져온 PHP 파일에는 배열 전달 매개변수가 포함되어 있습니다.

참고: 로드를 사용할 때 이러한 매개변수는 POST로 전달되므로 /test.php에서는 GET을 사용하여 매개변수를 얻을 수 없습니다.

5. 콜백 사용 방법 예를 들어 로드 메소드가 서버 응답을 받은 후 로드된 콘텐츠를 천천히 표시하려면 콜백 기능을 사용할 수 있습니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("#go" ).click(function(){
$("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam", function(){
$("#myID").fadeIn('slow');}
);
});

6. 페이지 조각 로드

.load() 메서드를 사용하면 삽입할 원격 문서의 특정 부분을 지정할 수 있습니다. 이는 URL 매개변수에 대한 특수 구문을 통해 달성됩니다. 문자열에 하나 이상의 공백이 포함된 경우 첫 번째 공백 다음의 문자열은 로드되는 항목을 결정하는 jQuery 선택기입니다. 예:

코드 복사 코드는 다음과 같습니다.

$("#result" ).load( "/test.html #컨테이너");

7. jquery 로드 시 캐시 사용을 방지하는 방법

캐싱을 사용하면 페이지 로딩 속도가 어느 정도 빨라지지만 종종 문제가 발생합니다. 실제 애플리케이션에서는 브라우저 캐시 문제가 발생할 수 있습니다. 예를 들어 IE7에서 이 문제가 발생했습니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ){
$("#labels").load("/test.html");
//페이지가 로드되면 test.html의 내용을 ID가 #labels인 DOM 요소에 삽입합니다.
});

test.html을 업데이트한 후에도 IE7의 로드 메소드는 여전히 이전 test.html을 사용하고 있으며 새로고침 키를 눌러도 작동하지 않습니다. 다행히 jQuery에서는 ajax가 캐시를 사용하지 못하도록 방지하는 방법을 헤드 자바스크립트 파일에 추가하여 문제를 해결합니다.

코드 복사 코드는 다음과 같습니다.

$.ajaxSetup({
cache : false / /AJAX 해당 캐시 닫기
});

이 외에도 캐시 문제를 해결하는 여러 가지 방법을 소개하겠습니다. 참고: jQuery 로드 문제에 대해서는 테스트하지 않았습니다. 이 방법은 참조용일 뿐입니다!

1. test.html을 labels_new.html로 변경하는 등 파일 이름을 변경하지만 이는 당연한 일이며 일반적으로 아무도 이를 수행하지 않습니다.

2. test.html 뒤에 특정 시간을 추가합니다(예: test.html?20081116). 실제 작업에서는 css/javascript 파일을 업데이트한 후 파일이 캐시되는 것을 방지하기 위해 항상 이 방법을 사용합니다.

3. test.html 파일 상단에 다음 명령문을 추가합니다.

코드 복사 코드는 다음과 같습니다. 다음:

또한 jquery load를 사용할 때 다음 사항에 주의해야 합니다.

(1) 창 개체에 바인딩된 경우 창, 프레임, 개체 및 이미지를 포함한 모든 콘텐츠가 로드된 후 트리거됩니다. 요소에 바인딩된 경우 해당 요소의 콘텐츠가 로드될 때 실행됩니다.

(2) 이 요소가 완전히 로드되기 전에 로드 처리 기능이 바인딩된 경우에만 로드된 후에 트리거됩니다. 나중에 바인딩하면 절대 트리거되지 않습니다. 따라서 $(document).ready()에서 로드 이벤트를 바인딩하지 마세요. 왜냐하면 jQuery는 모든 DOM 로딩이 완료된 후 로드 이벤트를 바인딩하기 때문입니다.

(3) jQuery는 브라우저의 .innerHTML 속성을 사용하여 검색된 문서를 구문 분석하고 현재 문서에 삽입합니다. 이 프로세스 중에 브라우저는 종종 ,