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

Question

我正在使用 JSP/Servlets 运行 Apache Tomcat Web 服务器。我的网站有一个幻灯片，它使用 html 元素列表。我想用我在调用我的 Servlet 后解析的一些 JSON 数据填充此列表。通常我会在 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>[=2=].75</li>
    <li><img src="http://www.mywebsite.com/product_images/0007418226991.jpg" /><br>.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"}
    ]
}

这是我尝试创建一个 app/controller 来填充列表，不幸的是，中途我意识到我不知道如何更改 html/inner html使用 angular 列出。我一直在关注有关该主题的 W3 Schools 教程，但它们并没有太大帮助。

  //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 数组的每个元素并执行类似以下操作的正确方法...我习惯使用 [=25= 遍历数组] 和 .each 但是 angular 有点令人困惑。

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

Answer 1

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

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

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>

这应该给你一个开始。 Here is an example 将所有这些放在一起。

其中一些是相当基本的 Angular 内容，所以如果您还没有看过他们的内容 tutorial or docs，我会推荐它。

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

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

html

javascript

json

servlets

angularjs