AngularJS中$http.jsonp跨域请求问题

1、angularjs的jsonp请求，其请求url后面必须加上JSON_CALLBACK

如：“http://localhost:8080/angularjs/json/phone.json?callback=JSON_CALLBACK”

2、callback=JSON_CALLBACK 是指指定回调函数的名称为JSON_CALLBACK ，这个名称在AngularJS发出请求时，会自动将JSON_CALLBACK替换成一个唯一的函数名，比如："callback=angular.callbacks._0"，这个可以通过浏览器debug模式查看.
我请求的url为“http://localhost:8080/angularjs/json/phone.json?callback=JSON_CALLBACK”



3、比较重要的，你的返回数据必须放在JSON_CALLBACK (json数据)里面。

注意：JSON_CALLBACK 必须是angularjs把你的JSON_CALLBACK
替换后的值，如：angular.callbacks._0，假设你请求到后台，你可以先获取到callback这个参数的值，然后把组装你要返回的json数据。

eg:
假设是SpringMVC

String callback = request.getParameter("callback");

JSONObject json =new
JSONObject();

json.put("id", "123456");

json.put("username", "hhaip");

json.put("age", 25);

json.put("sex", "男");

return
callback+"("+json+")";
//返回的json格式和下面我的例子一样

我请求的是一个.json文件，在tomcat里面直接新建了一个文件夹，里面放了一个.json文件，该文件里存放了json格式的数据，如下：

angular.callbacks._0([ //angular.callbacks._0不能写成JSON_CALLBACK

{

"id":"00001",

"name":"Nexus S",

"snippet":"Fast just got faster with Nexus S.",

"age":12,

"address":"江西九江"

},

{

"id":"00002",

"name":"Motorola XOOM™ with Wi-Fi",

"snippet":"The Next, Next Generation tablet.",

"age":21,

"address":"江西南昌"

},

{

"id":"00003",

"name":"MOTOROLA XOOM™",

"snippet":"The Next, Next Generation tablet.",

"age":22,

"address":"江西丰城"

}

,

{

"id":"00004",

"name":"一加X",

"snippet":"一加最新的一款轻期旗舰手机",

"age":19,

"address":"江西赣州"

}

,

{

"id":"00005",

"name":"锤子手机",

"snippet":"东半球最好用的手机",

"age":13,

"address":"江西上饶"

}

,

{

"id":"00006",

"name":"iphone 6s",

"snippet":"苹果6plus手机",

"age":18,

"address":"江西宜春"

}

])

4、$http.jsonp是向服务器发送请求，所以你不能直接就访问非服务器里的文件，那样会报错。

(1). 可以在tomcat的webapps文件夹里新建一个文件夹，里面放一个文件如：data.json，这样就是一个项目了。

(2). 然后启动你的tomcat，就启动服务了，数据就在服务器里。

(3). 请求的url可以写成http://localhost:8080/文件夹名/data.json?callback=JSON_CALLBACK

此博文为原创，转载请注明出处