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 =newJSONObject();

  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

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