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

AngularJS应用程序需要从从Spring引导后端调用的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引导方法：

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

---

您可以使用

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

---

首先，我不建议在使用angular处理请求时使用参数构建自己的字符串。您可以简单地执行以下操作：

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

其次，如果您将如上所述的内容类型头放在“application/json”中，并且服务器支持它，那么angular将自动解析您的数据，并将javascript对象作为response.data返回给您

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

您有两个选项可以修复此问题：

（快速，简单，但不好）做第二个文档。在post请求的回调内编写

（正确的方法）改为在角度范围上定义值：

$scope.fnm3=response.data.firstname

并定义一个相应的模板，用它做一些角度双向绑定，如：

Firstname: {{ fnm3 }}

---

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

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
}

---

$http自动将响应转换为JSON。您的建议都不会改变我的操作末尾注释中显示的终端日志。另外，在FireFox调试器的

console.log（response）行中添加一个断点不会产生任何结果，因为程序显然在服务器端SYSO和客户端之间的某个点上锁定，无法解析响应。从web服务返回的JSON是什么？@Dan我不确定，因为
console.log（response）
没有返回任何内容。程序在该行的断点之前冻结，但终端日志显示调用了服务器端方法。（专业提示：元评论通常不适合这里的问题。没有公认答案的问题默认被视为没有令人满意的答案。如果你想澄清一个问题，那么尽一切可能（a）在文章末尾添加澄清，解释可能出现的误解，（b）尽量不要暗示读者猜测或发了垃圾邮件——大多数人只是想提供帮助，（c）避免投票评论——大多数读者对此不感兴趣，他们甚至都没有登录）。您的第二个建议涉及更改服务器代码。我已在我的OP中给出了服务器代码。您能否说明如何在特定语法方面进行更改？另外，请澄清，您的第三个建议是编写
Firstname:{{fnm3}}
在html视图中？您也可以尝试在客户端设置内容类型，这只是服务器是否支持的问题。但是您可以尝试一下，我将相应地更改上面的代码。第三个建议的意思是，是的。将其放在相应的html视图中，并将fnm3变量放在$scope变量上，而不是ju上st函数中的匿名变量将http post更改为您的建议确实会导致调用服务器方法并返回与我的操作结束时的注释中所示相同的SYSO。但是，在返回任何内容之前，程序仍然冻结。firefox调试器控制台不会打印任何内容。firefox只是在rminal在我的操作说明中显示了服务器端系统。下面是我使用代码更改的内容：
$http（{method:'POST'，url:'/confirm email'，headers:{'Content-Type'：'application/json'}，params:{d:$routeParams.d}）。然后（函数（response）{console.log（response）；
在我远程控制
console.log（response）时，它甚至会冻结
如下：
then（函数（响应）{/*console.log（响应）；*/}）；
。我还可以发布什么来帮助隔离解决方案？我现在非常确定问题完全在服务器端。客户端代码看起来像这样，应该是正确的。很遗憾，我无法帮助您处理服务器部分，因为我对所用的技术不够坚定，抱歉。OP指定了post，并询问了一个问题一篇文章的具体结果。你在这里发表的是一篇似乎离题的一般性评论，它比OP添加了更多的代码。你有什么具体的建议来解决OP中的问题吗？
 var SearchData = metaService.CallService1(method, "meta/selectAll", searchedMeta);
          SearchData.success(function (data) {

    $scope.Title = data.Title
}