如何在 Spring Boot 中使用 JavaScript、jQuery 的 Ajax 成功时将数字转化为星级？
Posted
技术标签:
【中文标题】如何在 Spring Boot 中使用 JavaScript、jQuery 的 Ajax 成功时将数字转化为星级？【英文标题】：How to turn number into star rating while Ajax success using JavaScript, jQuery in Spring Boot? 【发布时间】：2021-09-14 03:21:48 【问题描述】：我正在开发一个 Spring Boot Web 应用程序。我有一个页面需要显示星级评分系统。评级数存储在数据库中。格式为：1、1.5、2、2.5...最多 5。我想将这些数字转换为星号。从 mysql DB 获得 ajax 响应成功后，我应该怎么做。
function getreview()
var productid = document.getElementById('pid').value;
var url = "/api/getcustomerreview";
$.post(url,
productid : productid,
, function(data, status)
if (data.status == "OK")
if (data.statusCode == 1)
var div = "", des = "";
var list = data.response;
var listlength = list.length;
if(listlength > 0)
for(var i = 0; i < listlength; i++)
var rating = list[i].reviewrating;
var stars = "";
console.log("Customer review rating: "+rating); // for product id
15 there is rating number 5 and 4
div = div + "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">"
+"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">"
+"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">"
+"<h4>"+list[i].customername+"</h4></div><div class=\"rating-product\"><i class=\"ion-android-star\"></i>"
+"</div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>"
+"</div><div class=\"review-bottom\"><p>"+list[i].reviewmessage+"</p></div></div></div>"
+"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>"
+"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">"
+"<h4>"+list[i].customername+"</h4></div><div class=\"rating-product\"><i class=\"ion-android-star\"></i>"
+"</div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>"
+"</div><div class=\"review-bottom\"><p>"+list[i].reviewmessage+"</p></div></div></div>"
+"</div></div></div>";
document.getElementById('des-details3').innerhtml = div;
else
var error = data.responseMessage;
swal(error, "", "error");
else
var error = data.responseMessage;
swal(error, "", "error");
);
下面的div标签是根据已经存储在数据库中的评分来显示星星。
<div class=\"rating-product\"><i class=\"ion-android-star\"></i></div>
【问题讨论】：
你会根据需要显示一些明星图像 是的，假设我有 5 号，所以应该可以看到五颗星图标。 是的，这正是你要做的事情 但问题是我很难弄清楚应该怎么做。 您可以显示正确数量的图像 - 无论您需要什么（从您的代码中不清楚您想要它们的位置，这就是没有人回答的原因） 【参考方案1】：您可以简单地使用带有 rating 的 for 循环作为计数器结束值，然后在每次迭代中使用 += 将您的图标附加到某个变量中，最后将其附加到已经生成的 html 中。
演示代码：
var div = "",
des = "";
//just for demo
var list = [
"customername": "abc",
"reviewmessage": "Good",
"reviewrating": 4.5
,
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 5
,
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 3.5
] //data.response;
var listlength = list.length;
if (listlength > 0)
for (var i = 0; i < listlength; i++)
var rating = parseInt(list[i].reviewrating);
var stars = "";
//loop through rating...no
for (var j = 1; j <= rating; j++)
stars += '<i class="fas fa-star" style="color:gold"></i>'; //append new star on each iteration..
//check if there is `.` in number..means .5
if (list[i].reviewrating.toString().indexOf('.') != -1)
//half star
stars += '<i class="fas fa-star-half-alt" style="color:gold"></i>'
//pass them here
div = div + "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">" +
"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">" +
"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\">" + stars +
"</div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>" +
"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\">" + stars +
"</div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"</div></div></div>";
document.getElementById('des-details3').innerHTML = div;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="des-details3"> </div>其他方式你可以使用star-rating-svg插件来实现这一点。所以，你只需要用 rating 的值来初始化它们。
演示代码：
var div = "",
des = "";
//just for demo
var list = [
"customername": "abc",
"reviewmessage": "Good",
"reviewrating": 4.5
,
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 5
,
"customername": "xyz",
"reviewmessage": "Very good",
"reviewrating": 3.5
] //data.response;
var listlength = list.length;
if (listlength > 0)
$("#des-details3").empty()
for (var i = 0; i < listlength; i++)
var rating = parseFloat(list[i].reviewrating);
div = "<div class=\"row\"><div class=\"col-lg-7\"><div class=\"review-wrapper\"><div class=\"single-review\"><div class=\"review-img\">" +
"<img src=\"public/web/assets/images/1.png\" alt=\"\"/></div><div class=\"review-content\">" +
"<div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\"></div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"<div class=\"single-review child-review\"><div class=\"review-img\">\<img src=\"public/web/assets/images/2.png\" alt=\"\"/>\</div>" +
"<div class=\"review-content\"><div class=\"review-top-wrap\"><div class=\"review-left\"><div class=\"review-name\">" +
"<h4>" + list[i].customername + "</h4></div><div class=\"rating-product\"></div></div><div class=\"review-left\"><a href=\"#\">Reply</a></div>" +
"</div><div class=\"review-bottom\"><p>" + list[i].reviewmessage + "</p></div></div></div>" +
"</div></div></div>";
$("#des-details3").append(div) //append your div
//then intialize your rating...
$("#des-details3 .row:last .rating-product").starRating(
initialRating: rating,
strokeColor: '#894A00',
strokeWidth: 10,
starSize: 25
);
.rating-product
pointer-events: none/*use this if you don't want user to change rating*/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/src/css/star-rating-svg.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/src/jquery.star-rating-svg.js"></script>
<div id="des-details3"> </div>【讨论】：
【参考方案2】：使用 array.fill() 然后将数组转换为文本：
const s5 = ["\u2606", "\u2606","\u2606", "\u2606", "\u2606"];
s5.fill('\u2B50',0,rating);
s5text = s5.join("");
【讨论】：
以上是关于如何在 Spring Boot 中使用 JavaScript、jQuery 的 Ajax 成功时将数字转化为星级？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Spring Boot 中使用 Spring Security 启用 CORS
如何在 Spring Boot 中使用 Spring Security 配置 CORS？ [复制]
如何在Spring Boot 中使用 HandlerMethodArgumentResolver