버튼 클릭 시 jQuery 및 Ajax를 사용하여 Div의 콘텐츠를 다시 로드하는 방법은 무엇입니까?

jQuery 및 Ajax로 Div 콘텐츠 다시 로드

문제:

전체 페이지를 새로 고치지 않고 버튼을 클릭하면 특정 div의 콘텐츠가 표시됩니다.

코드 샘플:

<code class="html"><div role="button" class="marginTop50 marginBottom">
  <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
  <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" />
</div>

<div id="list">
  <!-- Content to be reloaded -->
</div></code>

잘못된 접근 방식:

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $("#step1Content").load();
});</code>

load() 메서드에 콘텐츠를 로드하려면 URL이 필요하기 때문에 이 코드는 올바르지 않습니다.

해결책:

jQuery의 load( ) 메소드를 URL과 함께 사용하여 원격 콘텐츠를 로드할 수 있습니다. 그러나 현재 페이지에서 콘텐츠를 다시 로드하려면 다음 접근 방식을 사용할 수 있습니다.

1. 해시와 함께 절대 URL 사용:

<code class="javascript">$("#list").load(location.href + " #list");</code>

그러면 현재 URL에서 ID가 "list"인 요소의 콘텐츠가 로드됩니다. 두 번째 "#" 기호 앞의 공백에 유의하세요.

2. Ajax 사용:

또 다른 접근 방식은 Ajax를 사용하는 것입니다. 이 접근 방식을 사용하면 서버에 Ajax 요청을 하고, 콘텐츠를 검색하고, div를 업데이트합니다.

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $.ajax({
    url: "YOUR_ENDPOINT_URL",
    success: function (data) {
      $("#list").html(data);
    },
  });
});</code>

이 경우 "YOUR_ENDPOINT_URL"은 로드할 콘텐츠를 반환하는 서버 엔드포인트입니다.

추가 참고 사항:

1. 콘텐츠를 다시 로드하기 전에 "다시 캡처" 버튼이 활성화되어 있는지 확인하세요.
2. Ajax 접근 방식을 사용하는 경우 서버 엔드포인트가 적절한 형식(HTML 또는 JSON)으로 콘텐츠를 반환하는지 확인하세요.

위 내용은 버튼 클릭 시 jQuery 및 Ajax를 사용하여 Div의 콘텐츠를 다시 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!