php+mysql结合Ajax实现点赞功能完整实例-前端开发

下面我将详细讲解 “php+mysql结合Ajax实现点赞功能完整实例”的攻略。

下面我将详细讲解 “php+mysql结合Ajax实现点赞功能完整实例”的攻略。

一、前置知识

在学习本例之前，需要掌握基本的PHP、MySQL和Ajax的使用知识。另外，需要了解一下前端和后端交互的原理，以及前端数据的异步处理方式。

二、实现过程

1. 数据库设计

本例中需要设计一个数据库表，用来存储点赞的数据：

CREATE TABLE `likes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `article_id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

其中，id为点赞记录的唯一标识；article_id为所点赞的文章的ID；user_id为点赞用户的ID。

2. 编写点赞功能的PHP代码

接收前端传来的article_id和user_id参数，将点赞信息插入到数据库中，并返回操作结果：

$article_id = $_POST['article_id'];
$user_id = $_POST['user_id'];

$conn = new mysqli('localhost','root','password','database');
$sql = "INSERT INTO likes (article_id,user_id) VALUES ('$article_id','$user_id')";
$res = $conn -> query($sql);

if($res){
  echo "success";
}else{
  echo "fail";
}

查询某篇文章的点赞数量，并将结果返回：

$article_id = $_POST['article_id'];

$conn = new mysqli('localhost','root','password','database');
$sql = "SELECT COUNT(*) FROM likes WHERE article_id = '$article_id'";
$res = $conn -> query($sql);
$row = $res -> fetch_assoc();
$count = $row['COUNT(*)'];

echo $count;

3. 编写点赞功能的Ajax代码

发送点赞请求

$.ajax({
  url: 'like.php',
  type: 'POST',
  data: {
    'article_id': 1,
    'user_id': 2
  },
  success: function(data){
    if(data === 'success'){
      alert('点赞成功');
    }else{
      alert('点赞失败');
    }
  }
});

查询点赞数量

$.ajax({
  url: 'count.php',
  type: 'POST',
  data: {
    'article_id': 1
  },
  success: function(data){
    $('#count').html(data);
  }
});

其中，like.php和count.php分别为上面编写的点赞和查询点赞数量的PHP文件。

三、注意事项

在点赞操作中，需要使用事务来保证数据的一致性。
在查询点赞数量时，需要加上缓存机制，避免每次查询都会对数据库造成额外的负担。

四、示例说明

在实施这个例子之前，需要在本地或者服务器端创建一个包含上述数据库表的数据库，保存主页面、点赞页面和Ajax代码所需要的信息。

第一个示例：展示点赞页面，该页面将会调用点赞PHP脚本：

<!DOCTYPE html>
<html>
<head>
  <title>点赞页面</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <button onclick="like(1,2)">点赞</button>
  <p>已有<span id="count"></span>个人点赞</p>
  <script>
    function like(article_id,user_id){
      $.ajax({
        url: 'like.php',
        type: 'POST',
        data: {
          'article_id': article_id,
          'user_id': user_id
        },
        success: function(data){
          if(data === 'success'){
            alert('点赞成功');
            get_count(article_id);
          }else{
            alert('点赞失败');
          }
        }
      });
    }

    function get_count(article_id){
      $.ajax({
        url: 'count.php',
        type: 'POST',
        data: {
          'article_id': article_id
        },
        success: function(data){
          $('#count').html(data);
        }
      });
    }

    get_count(1);
  </script>
</body>
</html>

该页面中有一个按钮，当用户点击该按钮时，会向服务器发送请求，调用点赞PHP脚本。同时，该页面还会显示当前已有多少人点赞。

第二个示例：展示主页面，该页面将会被用户打开：

<!DOCTYPE html>
<html>
<head>
  <title>主页面</title>
</head>
<body>
  <a href="like.php">点赞</a>
</body>
</html>

在该页面中仅有一个连接，在用户单机该链接时，会跳转到点赞页面。