Question

AngularJS应用程序需要从Spring Boot后端调用的REST服务中检索JSON对象。如何修改下面的代码，以便可以将响应解析为返回的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返回给你。 / p>

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

您有两种方法可以解决此问题：

（快速，简单，但不好）做第二个document.write在你的后请求的回调中
（正确方法）在角度范围内定义您的值：

$ 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
}

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

3 个答案: