使用 jQuery、AJAX 和 PHP 构建 5 星级评级系统

引言

在网站开发中，评级系统是一个非常常见的功能。本文将介绍如何使用 jQuery、AJAX 和 PHP 来构建一个 5 星级评级系统。本文将由第一步开始，带领您完成您自己的评级系统。在完成本文后，您将能够添加这个评级系统到您自己的网站中，让用户对您的网站进行评分。

第一步：准备工作

在开始构建评级系统之前，您需要确保您已经掌握以下技术：

HTML、CSS 和 JavaScript 的基础知识

jQuery 和 AJAX 的基础知识

PHP 的基础知识

如果您还没有掌握以上技术，您可以先花一些时间学习这些技术。

Step 1：创建 HTML 文件

首先，我们需要创建一个 HTML 文件来放置评级系统。在这个文件中，我们将创建一个 <div> 元素来包含我们的评级系统。在 <div> 元素内部，我们将创建 5 个 <span> 元素来模拟评级星星。每个 <span> 元素都将包含一个字体图标，用于表示一颗星星。下面是示例代码：

<div id="rating">

  <span class="star" data-value="1"><i class="fa fa-star-o"></i></span>
  <span class="star" data-value="2"><i class="fa fa-star-o"></i></span>
  <span class="star" data-value="3"><i class="fa fa-star-o"></i></span>
  <span class="star" data-value="4"><i class="fa fa-star-o"></i></span>
  <span class="star" data-value="5"><i class="fa fa-star-o"></i></span>
</div>

在这里，我们为 <div> 元素设置了一个 ID，这样我们可以稍后从 JavaScript 中引用这个元素。对于每颗星星，我们都设置了一个 data-value 属性来表示这颗星星的值。对于每个 <span> 元素，我们还包含一个具有字体图标的 <i> 元素。在这个示例中，我们使用了 Font Awesome 来为星星添加字体图标。

Step 2：添加 CSS 样式

接下来，我们需要为评级系统添加 CSS 样式。我们将使用 CSS 来设置星星的颜色和大小。下面是示例 CSS 代码：

#rating {

  font-size: 35px;
  display: inline-block;
}
.star:hover,
.star:hover ~ .star {
  color: #FFD700;
}
.star {
  font-size: 1em;
  color: #CCC;
  transition: all .2s;
  cursor: pointer;
  display: inline-block;
}
.star[data-value="1"] {
  order: 1;
}
.star[data-value="2"] {
  order: 2;
}
.star[data-value="3"] {
  order: 3;
}
.star[data-value="4"] {
  order: 4;
}
.star[data-value="5"] {
  order: 5;
}
.fa-star-o:before {
  content: "\f006";
}
.fa-star:before {
  content: "\f005";
  color: #FFD700;
}

在这里，我们为 #rating 元素设置了一个较大的字体大小，并将其设置为 inline-block，以使其可以根据其他内容进行对齐。我们使用 CSS 过渡和伪类来创建鼠标悬停效果。我们为每个星星设置了一个 data-value 属性，并在 CSS 中捕获它们的值以使用 flexbox order 属性重新排序星星元素。我们还为字体图标设置了 CSS 样式，使其呈现为实心星星或空心星星。

Step 3：编写 JavaScript 代码

现在，我们需要编写 JavaScript 代码来控制评级系统的行为。当用户单击星星时，我们将使用 AJAX 请求将评分发送到服务器。然后，我们将使用 jQuery 来更新星星的颜色，以反映用户的评分。下面是示例 JavaScript 代码：

$(document).ready(function() {

  $("#rating .star").click(function() {    
    var rating = $(this).attr("data-value");
    
    $.ajax({
      type: "POST",
      url: "rate.php",
      data: {rating: rating},
      success: function() {
        $("#rating .star").each(function() {
          var value = $(this).attr("data-value");
          if (value <= rating) {
            $(this).find("i").removeClass("fa-star-o").addClass("fa-star");
          } else {
            $(this).find("i").removeClass("fa-star").addClass("fa-star-o");
          }
        });
      }
    });
  });
});

在这里，我们在文档准备就绪时绑定了单击事件。当用户单击星星时，我们使用 $(this).attr("data-value") 来获取星星的评分值，并将其发送到服务器。服务器将返回一个成功标志，然后我们将遍历星星元素并更新颜色，以反映用户的评分。如果星星的值小于或等于用户评分，我们将字体图标的类从 fa-star-o 更改为 fa-star，这样星星将呈现为实心。否则，我们将图标的类从 fa-star 更改为 fa-star-o，这样星星将呈现为空心。这样，我们就完成了评级系统的JavaScript代码。

第二步：创建 PHP 文件

现在，我们需要创建一个 PHP 文件来接受 AJAX 请求，并将评分存储到数据库中。在这里，我们将使用 PHP 和 MySQL，但您可以使用其他数据库技术，例如 MongoDB 或 PostgreSQL，来存储评级数据。下面是示例 PHP 代码：

  $host = "localhost";
  $user = "username";
  $password = "password";
  $database = "database";
  
  $conn = new mysqli($host, $user, $password, $database);
  
  if ($conn->connect_error) {
    die("Connection failed: ".$conn->connect_error);
  } 
  
  $rating = $_POST["rating"];
  
  $stmt = $conn->prepare("INSERT INTO ratings (rating) VALUES (?)");
  $stmt->bind_param("i", $rating);
  $stmt->execute();
  $stmt->close();
  
  $conn->close();
?> 

在这里，我们首先从 AJAX 请求中获取评分值，然后使用 mysqli 类建立到数据库的连接。如果连接失败，则输出错误消息并停止脚本。随后，我们使用准备语句将评分值插入到名为 ratings 的表中。最后，我们关闭语句和连接，并完成 PHP 文件的编写。

第三步：测试评级系统

现在，我们已经完成了评级系统的所有组件。接下来，我们需要测试评级系统。要完成此操作，请在服务器上部署文件，并指向您的评级系统页面。当用户单击评级星星时，会发生以下操作：

客户端发送 AJAX 请求到服务器

服务器接受请求并将评分插入到数据库中

服务器向客户端发送成功标志

客户端接受成功标志并更新评级系统中的星星颜色

通过完成上述步骤，您已经成功地创建了一个基于 jQuery、AJAX 和 PHP 的 5 星级评级系统。现在，您可以将它添加到您的网站中，让用户对您的网站进行评分。