如何使用 jQuery、Ajax 和 PHP 动态更新 DIV 内容？-php教程-PHP中文网

如何使用 jQuery、Ajax 和 PHP 动态更新 DIV 内容？

Mary-Kate Olsen

发布： 2024-10-21 16:15:30

原创

1087 人浏览过

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>
..

登录后复制

当用户单击链接时：

使用 GET 数据的 Ajax 请求： 页面使用链接的 URL 发送 Ajax 请求，通过 GET 将数据传递到 PHP 文件（通常是同一页面）。
带字符串的 PHP 响应： PHP 文件处理请求并返回包含摘要文本的字符串。
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中文网其他相关文章！