如何在 AngularJS 中使用 AJAX JSON 响应？

Question

AngularJS 应用程序需要从 Spring Boot 后端调用的 REST 服务中检索 JSON 对象。如何修改下面的代码，以便将响应解析为返回的 JSON 对象的属性？

例如，我想在 JSON 对象返回后提取 firstname、lastname 和其他属性。

这里是调用 REST 服务的 AngularJS 控制器：

angular.module('confirm', []).controller('confirm', function($scope, $http, $routeParams) {

     // set the default value
    $scope.confirmStatus = "blank";

    $scope.$on('$viewContentLoaded', function() {

        var str1 = "/confirm-email?d=";
        var str2 = $routeParams.d;
        var res = str1.concat(str2);
        var fnm3 = "nothing";
        $http.post(res).then(function(response) {
            fnm3 = response.data.firstname;//this line halts the program
            //replacing with following line doesn't work.
            //$scope.weblead = response.data;
        });
        $scope.confirmStatus = "success";
        document.write(fnm3);
    });
});

这里是传递 JSON 响应的 Spring Boot 方法：

@RequestMapping(value = "/confirm-email", method = RequestMethod.POST)
public @ResponseBody WebLead confirmEmail(HttpSession session, @RequestParam(value="d") String dval) {
    WebLead dummy = new WebLead();dummy.setFirstname("justAtest");
    try{
        System.out.println("The Server Heard The registration form Request!");
        System.out.println("dval is: "+dval);       
        String sid = session.getId();
        System.out.println("session id is: "+sid);
        try{
            List<WebLead> wleads = myrepo.findBySessionid(dval);
            if(wleads.size()>0){//replace with better handling later
                System.out.println("wleads.size is > 0 !");
                wleads.get(0).setEmailConfirmed("true");
                myrepo.save(wleads.get(0));
                return myrepo.findBySessionid(dval).get(0);
            }
            return dummy;
        } catch(Exception e){return dummy;}
    } catch(Exception e){return dummy;}
}    

注意：我们知道帖子是在服务器上处理的，因为/confirm-email处理程序中以SYSO开头的终端日志是：

The Server Heard The registration form Request!
dval is: a1b2c3
session id is: E1F844262F254E9B0525504723DBA490
2016-01-07 12:11:49.773 DEBUG 7288 --- [nio-9000-exec-9] w.c.HttpSessionSecurityContextRepository : SecurityContext is empty or contents are anonymous - context will not be stored in HttpSession.
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] tRepository$SaveToSessionResponseWrapper : Skip invoking on
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] tRepository$SaveToSessionResponseWrapper : Skip invoking on
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] o.s.s.w.a.ExceptionTranslationFilter     : Chain processed normally
2016-01-07 12:11:49.774 DEBUG 7288 --- [nio-9000-exec-9] s.s.w.c.SecurityContextPersistenceFilter : SecurityContextHolder now cleared, as request processing completed

Answer 1

您可以使用JSON.parse(jsonData)。这是一个可以帮助您实现目标的示例。

$http.post(res).then(function(response) {
    $scope.data = JSON.parse(response.data);
    fnm3 = $scope.data.firstname;
});

另外，当我使用我拥有的 REST 服务时，我喜欢在调试时将控制台日志放入函数中，然后在完成之前将它们删除。这让您可以轻松查看服务为您带来的回报。

$http.post(res).then(function(response) {
    console.log(response);
});

Answer 2

首先，我不建议在使用 Angular 进行请求时使用参数构建自己的字符串。你可以简单地做这样的事情：

$http({
    method: 'POST',
    url: '/confirm-email',
    headers: {
        'Content-Type': 'application/json'
    },
    params: {
        d: $routeParams.d
    }
}).then(function(response) {
    ...
});

其次，如果您将上面的内容类型标头放入“application/json”，并且如果服务器支持它，那么 Angular 将自动 JSON.parse 您的数据，并简单地将 javascript 对象作为 response.data 返回给您。

第三个也是最后一个问题是你的内容永远不会在你的代码中显示给定的数据，因为 POST 调用是异步的，但是在触发请求后立即 document.write 变量 fnm3 的内容。

您有两种选择来解决此问题：

1. （快速、简单，但不好）做第二个文档。在您的后请求回调中写入

2. （正确的方法）改为在 angular-scope 上定义您的值：

   $scope.fnm3 = response.data.firstname;

并定义一个相应的模板来做一些有角度的双向绑定魔术，比如：

Firstname: {{ fnm3 }}

Answer 3

为了编写更少的代码和更高的效率以及为了使调用服务的可重用性（因为您在多个页面中调用服务），请使用以下代码：

App.service("metaService", function ($http,$cookies) {  

    this.CallService = function (verb, serviceName, Data) {

    var Url = BaseURL + serviceName;

    switch (verb) {

        case "get":
            {
                return $http({
                    method: verb,
                    url: Url
                    , headers: {
                        'Content-Type': 'application/json; charset=UTF-8',
                        'Accept': '*/*',
                    }
                });
                break;
            }
        case "post":
        case "put":
        case "delete":
            {
                return $http({
                    method: verb,
                    url: Url,
                    data: Data
                   , headers: {
                       'Content-Type': 'application/json; charset=UTF-8',
                       'Accept': '*/*',
                   }
                });
                break;
            }
    }
}

});

那么你可以像这样调用callservice方法

 var SearchData = metaService.CallService1(method, "meta/selectAll", searchedMeta);
          SearchData.success(function (data) {

    $scope.Title = data.Title
}