링크 클릭을 통해 AJAX, PHP 및 jQuery를 사용하여 DIV 컨텐츠를 동적으로 업데이트하는 방법은 무엇입니까?

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

질문: 콘텐츠를 동적으로 업데이트하는 방법 링크를 클릭할 때마다 데이터베이스에서 데이터를 검색하고 가져온 요약으로 DIV를 바꾸는 AJAX, PHP 및 jQuery를 사용하여 DIV 요소를 구성합니까?

답변:

1단계: HTML 구조 생성

• 요약을 표시할 DIV 요소 포함:

<code class="html"><div id="summary"></div></code>

• 목록 추가 요약 검색 프로세스를 트리거하는 링크:

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

2단계: jQuery 스크립트 구현

• jQuery 함수를 생성하여 AJAX 요청 및 DIV 업데이트:

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] @ your backend side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script></code>

3단계: 링크에 클릭 이벤트 추가

• 각 링크에 onclick 이벤트를 추가합니다. 해당 ID 전달:

<code class="html"><a onclick="getSummary('1')">View Text</a></code>

4단계: 서버측 PHP

• $에 지정된 URL의 PHP 스크립트에서. ajax(), 수신된 ID를 기반으로 요약 검색:

<code class="php">$id = $_GET['id'];
$summary = fetchSummary($id); // Fetch summary from database</code>

• 가져온 요약을 문자열로 반환:

<code class="php">echo $summary;</code>

클릭하여 링크가 있으면 jQuery 함수가 AJAX 요청을 트리거하고, PHP 스크립트에서 요약을 가져오고, 검색된 콘텐츠로 DIV를 업데이트합니다.

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