首页  >  文章  >  后端开发  >  如何使用 jQuery、Ajax 和 PHP 动态更新 DIV 内容?

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

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-21 16:15:30976浏览

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn