淘先锋技术网

首页 1 2 3 4 5 6 7

在网站设计中,经常会出现希望用户可以对所看到的内容进行评分的需求,例如文章评分、商品评分等等。而在前端实现这一功能时,最常用的方法是使用ajax技术。

ajax技术可以使得在不刷新整个页面的情况下,实现网页部分内容的刷新。使用ajax技术实现评分功能时,用户可以通过点击页面上的评分按钮来进行评分,页面中的对应数据也会随之发生变化,而不需要刷新整个页面。下面就来看看如何使用php ajax技术来实现评分功能。

首先,我们需要在页面上放置一个评分按钮组件,用户可通过点击来进行评分操作。以电影评分为例,评分按钮通常为五颗星星,在点击某个星星后,就会提交评分数据,并将电影的平均评分信息返回至页面上。

<ul class="rating">
<li class="star" title="Not rated" data-value="1">&#9734;</li>
<li class="star" title="Poor" data-value="2">&#9734;</li>
<li class="star" title="Fair" data-value="3">&#9734;</li>
<li class="star" title="Good" data-value="4">&#9734;</li>
<li class="star" title="Excellent" data-value="5">&#9734;</li>
</ul>

其中,“data-value”这个属性用于存储每个星级的分数,在页面提交时会将所选星级的分值一并提交给后台。

接下来,我们需要使用jquery来处理页面上的按钮点击。当用户实施评分操作时,会触发评分ajax请求。这里我们封装了一个jquery函数:

$(".rating .star").click(function(event) {
event.preventDefault();
var star = $(this),
movie_id = star.closest("span").data("movie_id"),
url = "/rate.php?movie_id=" + movie_id + "&method=add_rating",
score = star.data("value");
type = star.closest("span").data("type");
$.ajax({
url: url,
type: "POST",
data: {score: score, type: type},
success: function(response){
console.log(response);
}
});
});

这个函数会首先阻止页面的默认行为,然后获取接下来需要提交的参数并进行ajax请求。在这里,我们使用POST方式将用户的分值以及电影的ID通过数据进行提交。如果后台处理成功,ajax的success回调函数会被执行,在函数体内可以执行后续的操作。

接下来,我们进入到后端的处理过程。首先,我们需要判断用户是否已经对该电影进行了评分操作。如果没有评分信息,则将当前分值累加到数据库中,并返回新的评分信息。如果已经进行了评分,则将该评分的分值进行覆盖,然后同样返回新的平均分值。以下是一个简单的PHP代码片段:

if(isset($_POST['score'], $_POST['type'], $_SESSION['user_id'])){
$score = intval($_POST['score']);
$movie_id = intval($_GET['movie_id']);
$user_id = intval($_SESSION['user_id']);
$stmt = $pdo->prepare("SELECT user_id FROM ratings WHERE movie_id = :movie_id AND user_id = :user_id");
$stmt->bindValue(":movie_id", $movie_id, PDO::PARAM_INT);
$stmt->bindValue(":user_id", $user_id, PDO::PARAM_INT);
$stmt->execute();
//用户还未对该电影进行评分操作
if(!$stmt->fetch()){
$stmt = $pdo->prepare("INSERT INTO ratings (user_id, movie_id, rating) VALUES (?, ?, ?)");
$stmt->execute([$user_id, $movie_id, $score]);
}
//用户已对该电影进行评分操作
else{
$stmt = $pdo->prepare("UPDATE ratings SET rating = :score WHERE user_id = :user_id AND movie_id = :movie_id");
$stmt->bindValue(":score", $score, PDO::PARAM_INT);
$stmt->bindValue(":user_id", $user_id, PDO::PARAM_INT);
$stmt->bindValue(":movie_id", $movie_id, PDO::PARAM_INT);
$stmt->execute();
}
//计算该电影的平均分值
$stmt = $pdo->prepare("SELECT AVG(rating) as rating FROM ratings WHERE movie_id = ?");
$stmt->execute([$movie_id]);
$data = $stmt->fetch(PDO::FETCH_ASSOC);
//将新的平均分值返回给页面
echo $data['rating'];
}

这里我们使用的是PDO来实现对数据库的访问,通过SELECT语句进行分数计算,而INSERT和UPDATE语句分别用于将新的评分数据写入数据库或对已有评分进行更新操作。最后,我们将新的平均分值通过echo语句返回给之前发送ajax请求的页面,这便是整个评分功能的全部实现过程。

总的来说,php ajax评分是一个非常实用的前后端交互技术。通过ajax技术可以高效地实现对分数数据进行提交和刷新,而后端的PHP代码则可以方便地进行数据查询和计算,从而实现评分功能的实现。