首頁 > 後端開發 > php教程 > 如何使用 jQuery、Ajax 和 PHP 動態更新 DIV 內容?

如何使用 jQuery、Ajax 和 PHP 動態更新 DIV 內容?

Mary-Kate Olsen
發布: 2024-10-21 16:15:30
原創
1086 人瀏覽過

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
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板