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

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

Mary-Kate Olsen
发布: 2024-10-21 16:15:30
原创
1074 人浏览过

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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板