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

26 浏览
0 Comments

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

这个问题在这里已经有答案了：

从AngularJS控制器将HTML插入视图

我正在使用JSP/Servlets运行Apache Tomcat Web服务器。我的网站上有一个基于HTML元素列表的幻灯片播放器。我想要使用调用我的Servlet后解析的JSON数据填充这个列表。通常情况下，我会通过改变列表的内部HTML并添加每个列表项来使用JQuery实现这个目标，但我想使用AngularJS来完成。附带说一下，我刚刚接触AngularJS。

//Note: The list should look like this when all is said and done.
    • $0.75

 

    • $3.00

 

 

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/内部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遍历数组，但是在angular中有些令人困惑。

  • {{x.price}}

 

admin 更改状态以发布 2023年5月24日
0

1 答案

0 Comments

您似乎有一般的想法，但缺少主要部分，将您的信息连接到作用域，然后使用它。

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

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;
         }
 );
 }

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

  • 
    {{item.price}}

    •

    这应该为您提供了一个开始。这里是一个示例，展示了这个过程。

    其中一些是相当基本的Angular知识，因此，如果您还没有查看教程或文档，我建议您这样做。

    0