如何使用 AJAX、PHP 和 jQuery 通过链接点击动态更新 DIV 内容？

通过 AJAX、PHP 和 jQuery 动态更新 DIV 内容

问题：如何动态更新内容使用 AJAX、PHP 和 jQuery 的 DIV 元素，其中每个链接单击都会从数据库检索数据并用获取的摘要替换 DIV？

答案：

第 1 步：创建 HTML 结构

• 包含将显示摘要的 DIV 元素：

<code class="html"><div id="summary"></div></code>

• 添加列表触发摘要检索过程的链接的数量：

<code class="html"><a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a></code>

第 2 步：实现 jQuery 脚本

• 创建一个 jQuery 函数来处理AJAX 请求并更新 DIV：

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] @ your backend side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script></code>

第 3 步：为链接添加 Click 事件

• 为每个链接添加 onclick 事件，传递相应的 ID：

<code class="html"><a onclick="getSummary('1')">View Text</a></code>

第 4 步：服务器端 PHP

• 在 $ 中指定的 URL 处的 PHP 脚本中。 ajax()，根据收到的 ID 检索摘要：

<code class="php">$id = $_GET['id'];
$summary = fetchSummary($id); // Fetch summary from database</code>

• 以字符串形式返回获取的摘要：

<code class="php">echo $summary;</code>

通过单击链接后，jQuery 函数将触发 AJAX 请求，从 PHP 脚本中获取摘要，并使用检索到的内容更新 DIV。

以上是如何使用 AJAX、PHP 和 jQuery 通过链接点击动态更新 DIV 内容？的详细内容。更多信息请关注PHP中文网其他相关文章！