Question

我在$http.json行中有一个错误。

这是我的代码：

var myApp = angular.module('myApp', ["ionic"]);

myApp.service("Pressed", ["$http", "$log", Pressed]);
myApp.controller("AppCtrl", ["$scope", "Pressed", "$log", AppCtrl]);



function AppCtrl($scope, Pressed, $log){

    $scope.refresh = function(){
        Pressed.getBlogs();
    }
}

function Pressed($http, $log) {
    this.getBlogs = function() {

        $http.jsonp('http://oasisgroups.com/oApp/product.php?callback=JSON_CALLBACK()')
        .success(function(result){
        $log.info(JSON.stringify(result.product));
        });

    };
}

当我点击刷新按钮时，控制台中会显示错误：

您还可以here找到相应的服务。

Answer 1

我认为主要问题是该服务似乎不支持jsonp调用。无论我如何调用您提供的服务，它只响应标准的JSON结果，而不是回调功能中包含的JSON。您的Chrome屏幕截图甚至显示原始JSON，而不是来自该服务的JSONP响应。如果服务不支持JSONP，则您无法强制执行，这是每个服务根据具体情况而定的，具体取决于它的编写方式。因此，您的错误的根本原因是AngularJS期望回调函数成为响应的一部分，它无法找到它，并且您得到了您所看到的错误。

我为你的代码构建了一个jasmine测试并且它通过了。这是我能做的最好的事情来确认你的代码是正确的，并且问题不在你的Angular代码之内。

除非Web服务实际上使用包装JSON的预期回调函数进行响应，否则您需要切换到标准$ http.get（）并处理可能以不同方式遇到的任何潜在XSS问题。

您可以使用this url查看有效的JSONP示例。你会注意到它以＆＃34; getdata＆＃34;开头。然后将JSON内容包装在该函数的内容中（）。您的服务没有使用回调查询字符串属性。

var myApp = angular.module('myApp', []);

myApp.controller("AppCtrl", ["$scope", "Pressed", "$log", function ($scope, Pressed, $log) {
$scope.refresh = function () {
    Pressed.getBlogs($scope);
}
}]);

myApp.service('Pressed', ['$http', '$log', function ($http, $log) {
var pressed = {};

pressed.getBlogs = function ($scope) {
    $http.jsonp('http://oasisgroups.com/oApp/product.php?callback=JSON_CALLBACK')
        .success(function (data,status,headers,config) {
            $log.info(JSON.stringify(data));
            $scope.products = data.product;
            console.log('Found ' + data.product.length + ' products');
        })
        .error(function () {
            console.log("Error during http get request.");
        });
};

return pressed;
}]);

然后测试看起来像这样：

describe('bad_jsonp', function () {
var service, scope;

beforeEach(module('myApp'));

beforeEach(angular.mock.inject(function ($rootScope) {
    scope = $rootScope.$new();
}));

beforeEach(inject(function($httpBackend, _Pressed_) {
    backend = $httpBackend;
    service = _Pressed_;
}));

it('test that service response contains the attribute product', function () {
    backend.expect("JSONP","http://oasisgroups.com/oApp/product.php?callback=JSON_CALLBACK").
        respond(200,
            {"success":1,"msg":"success","product":[{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_57_49_Pro__1452604019_113.193.193.146.jpg","title":"Shreenath Ji"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/1601124e199090-c030-4f01-be11-c5140cf20273__1452603831_113.193.193.146.jpg","title":"Acrylic Jali"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/1601128a718e95-7df0-4189-876e-204b715cf90d__1452603868_113.193.193.146.jpg","title":"Acrylic Jali"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/16011229b095c9-b897-4942-831f-92073f527374__1452603895_113.193.193.146.jpg","title":"Wooden Decorative"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/16011255ce3155-3956-4cfb-8dd5-39021713d350__1452603914_113.193.193.146.jpg","title":"Acrylic Jali Oranage"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_33_11_Pro__1452603994_113.193.193.146.jpg","title":"Acrylic Jali Green"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112607c733c-8dd5-442c-a584-6179339abb0e__1452603974_113.193.193.146.jpg","title":"Acrylic Jali White"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112300cca44-e783-48f7-b035-59ef0529ad53__1452603956_113.193.193.146.jpg","title":"Wooden Decorative"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/16011279e7c001-6663-4dfe-91ce-70cc87e6ca2d__1452603940_113.193.193.146.jpg","title":"Wooden Decorative"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_58_35_Pro__1452604069_113.193.193.146.jpg","title":"Corian Design "},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_59_14_Pro__1452604098_113.193.193.146.jpg","title":"Corian Design "},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_00_34_Pro__1452604138_113.193.193.146.jpg","title":"AalaBuster"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_01_20_Pro__1452604320_113.193.193.146.jpg","title":"AalaBuster"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_02_08_Pro__1452604343_113.193.193.146.jpg","title":"Corian wash basin"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_02_25_Pro__1452604370_113.193.193.146.jpg","title":"3d Corian Design"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_02_43_Pro__1452604393_113.193.193.146.jpg","title":"3d Corian Design"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_03_13_Pro__1452604424_113.193.193.146.jpg","title":"3d Wooden Decorative"}]}
        );

    expect(service).toBeDefined();

    service.getBlogs(scope);
    backend.flush();

    console.log(scope.products);

    var products = scope.products;
    expect(products.length).toBe(17);
    expect(products[0].title).toBe("Shreenath Ji");
});
});

测试并没有在响应内容中包含实际的回调，因为模拟框架首先处理包装和展开，就像AngularJS一样，所以它不是一个精确的测试但是它尽可能接近我们拥有的东西。

Angular JS：Uncaught SyntaxError：意外的令牌

1 个答案: