AngularJS下jsonp跨域SyntaxError问题

AngularJS下jsonp跨域missing ; before statement的问题

今天下午帮忙写一段AngularJS的代码,其中用到了跨域请求json。首选当然是$http.jsonp

使用规则

  1. 指定callback回调函数名
  2. 函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写
  3. 使用jsonp时,返回的数据必须为严格的json格式

示例代码

$scope.getJobs = function () {
        url = 'http://localhost:8082/test.php?callback=JSON_CALLBACK';
        $http.jsonp(url)
        .success(function (response) {
            console.log('Get Jenkins Jobs OK')
            $scope.lists = response.data;
        })
        .error(function (data, status) {
            console.log('Get Jenkins Jobs Bad')
        });
};

出现的问题

由于原来的后台在家里无法访问,所以模仿json数据格式自己用php写了个后台,架在http://localhost:8082上,直接将json数据echo出来。

php后台的代码:

<?php
	$json = '{"code": 200, "message": "OK"}';
	echo $json;
?>

访问后就像下面这样

写完后发现怎么也读不出来返回的json数据。打开控制台,发现报错SyntaxError: missing ; before statement

百思不得其解。上网查也没查出个所以然,只知道是json格式出了毛病,但是将json串放到json检测工具上去,的确是严格的json格式。

最后看来官方文档

Relative or absolute URL specifying the destination of the request.
The name of the callback should be the string JSON_CALLBACK.

总算明白了,返回的json必须是这种格式

JSON_CALLBACK({ json数据 })

总算搞明白了
于是换成这样写

php后台代码:

<?php
	$callback = $_GET['callback'];
	$json = '{"code": 200, "message": "OK"}';
	echo "$callback($json)";
?>

得到的数据是这样的

JSON_CALLBACK({"code": 200, "message": "OK"})

这次可以读出来了,完全没有问题。

posted @ 2017-01-20 20:16  默小鱼  阅读(763)  评论(0编辑  收藏  举报