>  기사  >  백엔드 개발  >  jQuery, Ajax 및 PHP를 사용하여 DIV 콘텐츠를 동적으로 업데이트하는 방법은 무엇입니까?

jQuery, Ajax 및 PHP를 사용하여 DIV 콘텐츠를 동적으로 업데이트하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-21 16:15:30973검색

How to Dynamically Update DIV Content Using jQuery, Ajax, and PHP?

jQuery, Ajax 및 PHP를 통해 DIV 콘텐츠를 동적으로 업데이트

동적 콘텐츠가 포함된 DIV가 있는 웹 페이지가 있는 시나리오를 생각해 보세요. 데이터베이스에서:

<div id="summary">Here is a summary of movie</div>

또한 링크 목록이 있습니다:

<a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a>
..

사용자가 링크를 클릭할 때:

  1. GET 데이터가 포함된 Ajax 요청: 페이지는 링크의 URL을 사용하여 Ajax 요청을 보내 GET을 통해 데이터를 PHP 파일(일반적으로 동일한 페이지)로 전달합니다.
  2. 문자열이 포함된 PHP 응답: PHP 파일은 요청을 처리하고 요약 텍스트가 포함된 문자열을 반환합니다.
  3. DIV 콘텐츠 업데이트: jQuery를 사용하면 DIV의 #summary 요소가 반환된 문자열로 업데이트됩니다.

이 기능을 구현하려면:

<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // accessible as $_GET['id'] in PHP
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>

HTML에서 각 링크에 onclick 이벤트를 추가하세요.

<code class="html"><a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the link is clicked.</div></code>

위 내용은 jQuery, Ajax 및 PHP를 사용하여 DIV 콘텐츠를 동적으로 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.