다시 로드하지 않고 jQuery/AJAX를 사용하여 웹 페이지 섹션을 업데이트하는 방법은 무엇입니까?

jQuery/AJAX를 사용하여 다시 로드하지 않고 페이지 일부를 업데이트하는 방법

전체에 영향을 주지 않고 버튼 클릭으로 특정 div를 다시 로드하기 페이지는 웹 개발의 일반적인 요구 사항입니다. 이는 jQuery의 AJAX 기능을 사용하여 달성할 수 있습니다.

예

클릭하면 div1이라는 div의 콘텐츠를 업데이트해야 하는 버튼이 있다고 가정합니다. . 이를 수행하는 방법은 다음과 같습니다.

HTML:

<code class="html"><input type="button" id="myButton" value="Update DIV" />

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery:

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

설명:

• jQuery 클릭 이벤트 핸들러는 ID가 myButton인 버튼에 연결됩니다.
• 버튼을 클릭하면 load() 함수는 ID가 div1인 div에서 호출됩니다.
• load() 함수는 지정된 URL의 콘텐츠를 div.
• 이 경우 URL은 location.href " #div1"입니다. 현재 페이지의 URL을 검색하고 #div1 선택기를 추가합니다.
• 두 번째 # 기호 앞의 공백이 중요합니다. 이것이 없으면 위 코드는 div 내의 전체 페이지를 다시 로드합니다.
• 결과적으로 버튼을 클릭하면 div1의 콘텐츠가 동일한 콘텐츠로 업데이트됩니다. div를 현재 페이지에서 삭제하세요.

참고: 위 코드를 사용하기 전에 jQuery 라이브러리를 포함해야 합니다.

위 내용은 다시 로드하지 않고 jQuery/AJAX를 사용하여 웹 페이지 섹션을 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!