如何在 Ajax 成功使用 JavaScript、jQuery 在 Spring 启动时将数字转换为星级？

Question

我正在开发 spring 引导 Web 应用程序。我有一个页面需要显示星级评分系统。评分数存储在数据库中。格式为：1, 1.5, 2, 2.5...最多 5。我想将这些数字转换成星星。从 MySql 数据库获得 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>

Answer 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>

Answer 2

使用 array.fill() 然后将数组转换为文本：

const s5 = ["\u2606", "\u2606","\u2606", "\u2606", "\u2606"];
s5.fill('\u2B50',0,rating);
s5text  = s5.join("");

如何在 Ajax 成功使用 JavaScript、jQuery 在 Spring 启动时将数字转换为星级？

How to turn number into star rating while Ajax success using JavaScript, jQuery in Spring Boot?

javascript

ajax

jquery

jsp

spring-boot