从 Servlet 获得 HTTP JSON 响应后如何更改 HTML 代码 [重复]答案

【问题标题】：How do I change HTML code after getting HTTP JSON response from Servlet [duplicate]从 Servlet 获得 HTTP JSON 响应后如何更改 HTML 代码 [重复]
【发布时间】：2015-03-07 01:38:29
【问题描述】：

我正在运行一个带有 JSP/Servlet 的 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>$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"}
    ]
}

这是我尝试创建一个应用程序/控制器来填充列表，不幸的是，虽然我意识到我无法弄清楚如何使用 angular 更改列表的 html/inner html。我一直在关注有关该主题的 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 数组的每个元素并执行以下操作的正确方法...我习惯于使用 jquery 和 .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>

【问题讨论】：

为什么要更改内部 HTML？这需要一些工作，但对于 Angular，你需要摆脱 JQuery 做事的心态。
这似乎已在stackoverflow.com/questions/27848608/… 得到回答您也可以查看docs.angularjs.org/api/ng/directive/ngBindHtml 的角度文档
@E.Maggini 他的任何代码都没有显示他正在生成需要插入的 HTML，因此除非事实证明是这种情况，否则这不是重复的。
@MatthewGreen 他的问题是“如何更改 HTML 代码”......因此......
@E.Maggini 这是与插入 HTML 不同的问题。这就是为什么我不说这是重复的。

标签： javascript html json angularjs servlets

【解决方案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 或 docs 我会推荐它。

【讨论】：