javascript - 如何从 mysql 中获取评分星值？

Question

在我的基于 Worklight 的应用程序中，我有一个存储在 mysql 中的评级值（int）。我有作为 JSON 数据的评级整数值。

{"storeId":1000,"zipcode":"600014","rating":3,}

使用 Jquery，我需要将该评分值显示为应用程序中的星星图像。如果值为 2，那么我需要显示 2 个星图，以此类推。

我怎样才能做到这一点？

Answer 1

看看到目前为止你已经实现了什么（适配器实现、客户端适配器调用......）会很有帮助。
没有它，我只能提供一种可能的方法来从数据库中获取值并显示它。

假设：

• 在您的数据库中，有一个“星”字段和值
• 在应用程序的 common\images 文件夹中，有一张星星的图像
• 您已创建 SQL 适配器并正确配置它

执行：

1. 例如，在 common\index.html 中有一个空UL元素，以便获取的数据将在列表中：

       <ul id="usersAndStars"></ul>
   

2. 在 common\js\main.js 中，你调用你的适配器：

   // Of course, you can invoke it whenever you actually want to, and not like below...
   function wlCommonInit(){
       getStarsFromDatabase();
   }
   
   function getStarsFromDatabase() {
       var invocationData = {
           adapter: 'getStars',
           procedure: 'getStars'
       };
   
       WL.Client.invokeProcedure(
           invocationData,
           {
               onSuccess: displayStars,
               onFailure: failedGettingStars
           });
   }
   

3. 然后你处理调用、失败和成功的响应：

   function failedGettingStars() {
       alert("failure");
   }
   
   function displayStars(response) {
       var ul = $('#usersAndStars'); 
       var i, j, li;
   
       for (i = 0; i < response.invocationResult.resultSet.length; i += 1) {     
           // Create new <li> element and populate it
           li = $("<li/>").text("Item " + [i+1] + " has " + response.invocationResult.resultSet[i].stars + " stars: ");
   
           // Add images of a star
           // Note that this is purely applicative - instead of adding several img tags,
           // You could simply add an image showing 5 or 2 or 3 or however stars you want...
           // Or in any other way you want.
           for (j = 0; j < response.invocationResult.resultSet[i].stars; j += 1) {
               li.append("<img src='images/\star.png' alt='star'/>");
           }
   
           // Append the <li> element to the <ul> element
           ul.append(li);
       };
   }
   

4. 在 adapters\getStars\getStars-impl.js 文件中：

   var selectStatement = WL.Server.createSQLStatement("select * from users");
   
   function getStars() {    
       return WL.Server.invokeSQLStatement({
           preparedStatement : selectStatement,
           parameters : []
       });
   }
   

5. 在 adapters\getStars\getStars.xml 文件中：

   ...
   ...
   ...
   <procedure name="getStars"/>
   

最终结果：