简体   繁体   中英

Unable to parse JSON with AngularJS

I have just started with AngularJS and tried a very basic example. The webpage contains a button, on click of which I request a json from the server. But whenever, I click the button, the code executes the portion in the error function.

HTML file

<!DOCTYPE html>
<head>
    <title> step 4</title>
</head>

<body ng-app="step4App">
    <div ng-controller="FriendsCtrl">

        <button ng-click="loadFriends()">Load Friends</button>
    </div>

    <script src="angular.min.js"></script>
    <script src="xml2json.js"></script>
    <script src = "step4.js"></script>
</body>
</html>

JS

var app = angular.module("step4App",[]);

app.controller("FriendsCtrl", function($scope,$http) {
    $scope.loadFriends = function(){



        $http({method:'GET',url:'http://localhost:8080/test.jsp', params:{name:"abc",no:"LBF1151638"}}).success(function(data) {
            $scope.friends = data;
            document.write('<p>two</p>');
            document.write(data);
        }).error(function() {

            alert("error");
            });
            }

});

The jsp page as of now is returning this json response.

{"response":{"numFound":0,"start":0,"docs":[]}}

But I am not able to understand, why it always executes the error function.

I checked in the browser Console that a request is being made and a 47byte response is received (equal to the no of characters in the JSON). But it doesn't print the JSON.

There could be something wrong happening on the server. Try opening the page with FireFox + Firebug and inspect the server response to make sure it's what you expect (check the status code and the Content-Type response header).

You can also run from a command line do a curl -v http://localhost:8080/test.jsp .

BTW Angular passes you extra parameters in the callbacks. Try alert-ing them too see what they are. From http://docs.angularjs.org/api/ng/service/$http:

$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
  // this callback will be called asynchronously
  // when the response is available
}).
error(function(data, status, headers, config) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM