Angularjs Angular JS:未捕获的语法错误：意外标记

我在

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

    };
}

单击“刷新”按钮时，控制台中会显示一个错误：

---

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

我认为主要问题是该服务似乎不支持jsonp调用。无论我如何调用您提供的服务，它都只使用标准JSON结果响应，而不使用包装在回调函数中的JSON。您的Chrome屏幕截图甚至显示了原始JSON，而不是来自服务的JSONP响应。如果一个服务不支持JSONP，您不能强迫它，这是每个服务根据具体情况根据其编写方式所做的事情。因此，错误的根本原因是AngularJS希望回调函数成为响应的一部分，但它找不到它，因此您得到了您看到的错误

我已经为你的代码构建了一个jasmine测试，它通过了。这是我能做的最好的事情，以确认您的代码是正确的，并且问题超出了您的角度代码

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

您可以看到一个正在工作的JSONP示例。您将注意到，它以“getdata”开头，然后将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一开始所做的那样，所以这不是一个精确的测试，但它与我们现有的测试非常接近。

错误页面不可用。请用截图更新帖子。好的。。。我添加了错误页面的屏幕截图，并添加了服务链接should

log.info

不是

$log.info

？我更正了它。。但还是一样的错误。。。此链接仅可用2小时。您可能需要将

JSON\u CALLBACK（）

替换为

JSON\u CALLBACK

。此外，您的服务器似乎不返回JSONP，而只是返回JSON。改为使用$http.get（）。