> 백엔드 개발 > PHP 튜토리얼 > AJAX, PHP 및 jQuery를 사용하여 목록 항목 선택을 기반으로 DIV 콘텐츠를 동적으로 로드하는 방법은 무엇입니까?

AJAX, PHP 및 jQuery를 사용하여 목록 항목 선택을 기반으로 DIV 콘텐츠를 동적으로 로드하는 방법은 무엇입니까?

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

How to Dynamically Load DIV Content Based on List Item Selection with AJAX, PHP, and jQuery?

AJAX, PHP 및 jQuery를 사용하여 DIV 콘텐츠 조작

이 시나리오에서는 DIV 요소의 콘텐츠를 기반으로 동적으로 수정하는 것을 목표로 합니다. 목록 항목 선택 시. AJAX, PHP 및 jQuery를 사용하여 이를 달성하는 방법은 다음과 같습니다.

  1. DIV 및 목록 구조 만들기:
<code class="html"><div id="summary">Here is a summary of the movie</div>
<ul>
  <li><a href="?id=1" class="movie">Name of movie 1</a></li>
  <li><a href="?id=2" class="movie">Name of movie 2</a></li>
  ...
</ul></code>
로그인 후 복사
  1. AJAX 함수 정의:
<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_script.php',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>
로그인 후 복사
  1. 목록 항목에 클릭 이벤트 추가:
<code class="html"><ul>
  <li><a onclick="getSummary(1)">View Text 1</a></li>
  <li><a onclick="getSummary(2)">View Text 2</a></li>
  ...
</ul></code>
로그인 후 복사
  1. 요청을 처리하는 PHP 스크립트:

PHP 스크립트의 $_GET 배열에서 영화 ID($id)를 검색하고 다음에서 요약을 가져옵니다. 데이터베이스. 그런 다음 문자열로 반환합니다.

<code class="php">$id = $_GET['id'];
$summary = getMovieSummary($id);
echo $summary;</code>
로그인 후 복사

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

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