Ajax를 사용하여 상자 컨텐츠를 동적으로로드합니다

이 튜토리얼은 Ajax를 통해로드 된 동적 페이지 상자를 작성하여 전체 페이지 재 장전없이 인스턴트 새로 고침을 가능하게합니다. jQuery 및 JavaScript를 활용합니다. 맞춤형 Facebook 스타일 컨텐츠 박스 로더로 생각하십시오.

주요 개념 :

ajax 및 jquery는 전체 페이지 재 장전없이 동적으로로드 및 새로 고침 페이지 상자를 다시로드하지 않고 Facebook 및 Twitter와 같은 사이트의 기능을 반영합니다. 프로세스에는 DOM이 준비된 후 상자로드, 각 상자에 AJAX 기능을 사용하고 메시지로드 기능을 표시하고 서버 측 스크립트 (예 : PHP)를 사용하여 각 상자의 HTML을 반환합니다. 이 HTML은 웹 페이지의 해당 상자에 삽입됩니다. 시스템의 역학은 각 상자의 속성을 ​​사용하여 변수를 생성 한 다음 서버 측 스크립트와 일치합니다. 콘텐츠는 쉽게 다시로드되며 추가 CSS 또는 JavaScript없이 새 상자를 추가 할 수 있습니다. 이 Ajax 접근법의 장점 :

DOM이 준비된 후 컨텐츠 상자로드로 인한 더 빠른 페이지로드 시간. 전체 페이지로로드가없는 상자 내에서 컨텐츠 새로 고침 주요 플랫폼 (Facebook, Twitter 등)에서 사용하는 최신 웹 개발 관행과 일치합니다. 새 상자를 추가하려면 추가 CSS 또는 JavaScript 코드가 필요하지 않습니다.
• 작동 방식 :
• 페이지로드 후 jQuery는 각 상자에 대한 Ajax 함수를 호출합니다. id 로딩 메시지가 표시됩니다 서버 측 스크립트 (예 : PHP)는 상자의 HTML을 반환합니다. 내용이 상자에로드됩니다. 컨텐츠는 상자 위로 호버링하여 새로 고침 이미지를 드러내면서 쉽게 다시로드됩니다. 이 이미지를 클릭하면 콘텐츠 새로 고침이 트리거됩니다
동적 기능 :

각 상자는

입니다. 이 내의 요소는 동일한 를 사용하십시오. jQuery는이 를 사용하여 서버 측 스크립트와 일치하여 모든 변수가 상자의 에 따라 생성되기 때문에 시스템을 동적으로 만듭니다. jQuery 코드 : 이 코드는 페이지로드 후 실행, 상자 컨트롤 초기화 및 이벤트 첨부.

이 함수는 제공된

를 기준으로 내용을 자식
• 에로드합니다. 객체를 처리하기 위해 변수를 동적으로 생성합니다.
는 컨테이너
• 및 해당 PHP 스크립트 (예 : )를 식별하는 데 사용됩니다.
HTML 코드 (예) :
css 코드 :

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

이미지 :

• loader.gif
• refresh.png (원래 입력의 FAQS 섹션은 일반 Ajax 사용에 대한 별도의 관련없는 섹션이므로 생략되었습니다.)

위 내용은 Ajax를 사용하여 상자 컨텐츠를 동적으로로드합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!