首页  >  文章  >  后端开发  >  如何使用 AJAX、PHP 和 jQuery 根据列表项选择动态加载 DIV 内容?

如何使用 AJAX、PHP 和 jQuery 根据列表项选择动态加载 DIV 内容?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-21 16:44:02364浏览

How to Dynamically Load DIV Content Based on List Item Selection with AJAX, PHP, and jQuery?

使用 AJAX、PHP 和 jQuery 操作 DIV 内容

在这个场景中,我们的目标是动态修改基于 DIV 元素的内容关于列表项的选择。以下是如何使用 AJAX、PHP 和 jQuery 实现此目的:

  1. 创建 DIV 和列表结构:
<code class="html"><div id="summary">Here is a summary of the movie</div>
<ul>
  <li><a href="?id=1" class="movie">Name of movie 1</a></li>
  <li><a href="?id=2" class="movie">Name of movie 2</a></li>
  ...
</ul></code>
  1. 定义AJAX函数:
<code class="javascript">function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_script.php',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}</code>
  1. 为列表项添加点击事件:
<code class="html"><ul>
  <li><a onclick="getSummary(1)">View Text 1</a></li>
  <li><a onclick="getSummary(2)">View Text 2</a></li>
  ...
</ul></code>
  1. 处理请求的 PHP 脚本:

在 PHP 脚本中,从 $_GET 数组中检索电影 ID ($id) 并从以下位置获取摘要数据库。然后将其作为字符串返回:

<code class="php">$id = $_GET['id'];
$summary = getMovieSummary($id);
echo $summary;</code>

以上是如何使用 AJAX、PHP 和 jQuery 根据列表项选择动态加载 DIV 内容?的详细内容。更多信息请关注PHP中文网其他相关文章!

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