php+jQuery+Ajax实现点赞效果的方法(附源码下载)

我们来详细讲解一下“PHP+jQuery+Ajax实现点赞效果的方法(附源码下载)”。本文将从以下几个方面进行讲解：

实现原理
所需的依赖文件
如何在网页中引用依赖文件
示例说明
源码下载地址

1. 实现原理

实现点赞功能的原理是发起一个Ajax请求并且在后台执行一个操作。我们使用jQuery的Ajax方法来向服务器发送请求并获取响应。在后台，我们使用PHP处理请求并对数据库进行更新操作。

2. 所需的依赖文件

在本教程中，我们将使用到以下文件：

jquery-3.3.1.min.js - jQuery库文件
config.php - 包含数据库连接信息的PHP文件
like.php - 用于处理点赞请求的PHP文件
likes.sql - 数据库表的结构

3. 如何在网页中引用依赖文件

在网页的头部标签中引用库文件和配置文件，示例如下：

<head>
  <meta charset="UTF-8">
  <title>点赞功能实现</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/main.js"></script>
</head>

4. 示例说明

我们现在来看一下对于如何使用上述文件实现一个点赞功能的示例。

首先，在数据库中创建一个名为 likes 的表，表结构如下：

CREATE TABLE IF NOT EXISTS `likes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `page` varchar(255) DEFAULT NULL,
  `likes` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

然后将以下代码保存为 like.php 文件：

<?php
// 引入数据库连接信息
require_once('config.php');

// 获取页面名称
$page = $_POST['page'];

// 更新点赞数量
try {
    $stmt = $conn->prepare('UPDATE likes SET likes = likes+1 WHERE page = :page');
    $stmt->bindValue(':page', $page);
    $stmt->execute();

    // 返回点赞数量
    $stmt = $conn->prepare('SELECT likes FROM likes WHERE page = :page');
    $stmt->bindValue(':page', $page);
    $stmt->execute();
    $likes = $stmt->fetchColumn();

    echo $likes;

} catch (PDOException $e) {
    echo '失败: ' . $e->getMessage();
}
?>

在该文件中，我们首先通过 config.php 文件连接了数据库，然后获取了要更新点赞数据的页面名称，并使用该页面名称更新数据库中的点赞数量。随后，在载入点赞时返回点赞数量。

接下来，我们将以下代码保存为 main.js 文件：

$(document).ready(function () {
  $(".like-btn").on("click", function () {
    var page = $(this).data("page");
    var likes = $(this).find(".likes");

    // 发送AJAX请求
    $.ajax({
      url: "like.php",
      type: "POST",
      data: {
        page: page,
      },
      success: function (response) {
        likes.text(response);
      },
    });
  });
});

在上面的代码中，我们绑定了所有 like-btn 类的元素的点击事件。当用户点击任意一个带有 like-btn 类名的元素时，我们将从该元素获取 data-page 属性并在后台向 like.php 文件发送一个带有该属性作为参数的POST请求。之后，我们更新相应元素带有 likes 类的子元素的文本内容为返回的点赞数量。

最后，我们在网页中添加以下HTML代码：

<div class="like-btn" data-page="article1">
  <div class="likes">0</div>
  点赞
</div>

在上述代码中，我们添加了一个带有 like-btn 类的元素并向其添加了一个 data-page 属性。这个属性的值用于在后台更新数据库中相应的点赞数量。

5. 源码下载地址

现在你可以在这里下载相关的文件，进行测试和学习：

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：php+jQuery+Ajax实现点赞效果的方法(附源码下载) - Python技术站