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

Mary-Kate Olsen
풀어 주다: 2024-10-21 16:15:30
원래의
971명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!