如何从 Servlet 获得 HTTP JSON 响应后更改 HTML 代码

How do I change HTML code after getting HTTP JSON response from Servlet

本文关键字：HTML 代码 响应 JSON Servlet 获得 HTTP      更新时间：2023-09-26

我正在运行一个带有JSP/Servlets的Apache Tomcat Web服务器。我的网站有一个幻灯片，它使用一个 html 元素列表。我想用一些JSON数据填充这个列表，这些数据是在调用我的Servlet后解析的。通常我会在 JQuery 中通过更改列表的内部 html 并添加每个列表项来执行此操作，但我想改用 Angular JS。附带说明一下，我是Angular JS的新手。

//Note: The list should look like this when all is said and done.
<div data-ng-app="" data-ng-controller="getSlideshowProducts"> 
<ul class="bxslider" style='width: 100%;'>
    <li><img src="http://www.mywebsite.com/product_images/0003500044627.jpg" /><br>$0.75</li>
    <li><img src="http://www.mywebsite.com/product_images/0007418226991.jpg" /><br>$3.00</li>
</ul>
</div>

Servlet 返回的 JSON 数据如下所示

{"items":
  [
     { "quantity":"2",
       "price":"0.75",
       "name":"Ajax Super Deegreaser Lemon Dish Liquid 14 floz",
       "upc":"0003500044627",
       "category":"Cleaning Supplies"
      },
     {
        "quantity":"2",
        "price":"3.00",
        "name":"Softsoap Hand Soap 56 floz",
        "upc":"0007418226991",
        "category":
        "Cleaning Supplies"}
    ]
}

这是我尝试创建一个应用程序/控制器来填充列表，不幸的是，尽管我意识到我无法弄清楚如何使用角度更改列表的 html/内部 html。我一直在关注有关该主题的 W3 学校教程，但它们并没有太大帮助。

  //retrieves some random products for the slide show
 function getSlideshowProducts($scope,$http) {  
var items;
$http({
    url: "${pageContext.request.contextPath}/ItemServlet", 
    method: "GET",
    params: {query: "random-item-list", count: "12"}
 })
 .success(
         function(response) {
            items = angular.fromJson(response);             
         }
 );
 }

从本质上讲，我想找出获取 JSON 数组的每个元素并执行以下操作的正确方法......我习惯于使用 jquery 和 .each 遍历数组，但对于角度，它有点令人困惑。

  <li data-ng-repeat = "x in items"><img  src="img src="http://www.mywebsite.com/product_images/{{x.upc}}.jpg" /><br>{{x.price}}</li>

您似乎有一个大致的想法，但您缺少主要部分，将您的信息附加到范围然后使用它。

因此，对于第一部分，您只需要将返回的数据分配给范围。那看起来像这样。

function getSlideshowProducts($scope,$http) {  
$http({
    url: "${pageContext.request.contextPath}/ItemServlet", 
    method: "GET",
    params: {query: "random-item-list", count: "12"}
 })
 .success(
         function(response) {
            $scope.data = response;
         }
 );
 }

从那里，您现在可以在视图端与范围进行交互。因此，将各种值放在重复列表中可能如下所示。

<li data-ng-repeat = "item in data.items">
    <img src="http://www.mywebsite.com/product_images/{{item.upc}}.jpg" /><br>{{item.price}}
</li>

这应该给你一个开始。下面是一个示例，说明这一切看起来会是什么样子。

其中一些是相当基本的 Angular 内容，所以如果您还没有浏览他们的教程或文档，我会推荐您这样做。

相关文章：