前端少侠与ng的json故事：jsonp的应用
码在江湖.jpg
话说天下大势，分久必合，合久必分，代码江湖自进入21世纪以来，前后端分离成为了大势所趋，代码分工更为精细，更为深入，而正所谓码在江湖，身不由己，为了更好的实现需求，程序猿们必须不断学习新的知识，从此踏上了每天给自己挖坑给别人填坑的不归路。
说回正事，上回说到前端少侠dk懂得了一点ng的皮毛功夫就和后端进行数据对接，殊不知get()方法获取json数据失败，究竟是什么原因造成的呢？
跨域访问
当时，我跟樟哥说：樟哥，这次肯定可以的！
然而发送请求的时候就没有数据返回，页面根本没有响应，按下f12，发现network的response报了一条错误，在console里看，返回一条错误信息：
Uncaught SyntaxError: Unexpected token ://谷歌浏览器
SyntaxError: missing ; before statement//火狐浏览器
经查实，这其实是一个跨域访问的错误，什么是跨域访问呢？据一位江湖人士的解答，大概就是这样的：
- 如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容
- 如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题
- Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题
- 一般都会用jsonp方法来解决
于是，我又屁颠屁颠地去找jsonp()了。
寻找ng的jsonp()
网上关于ng的jsonp()说的非常的零散，以至于我把网上关于ng的jsonp()的内容都看了一遍，这一遍便是一整个下午。
网上关于jquery的jsonp倒是挺全的，不过ng的信息就差太远了。
那天下午，我被忽悠把get()换成jsonp()，然后在请求的后面加上一个参数'callback' : 'JSON_CALLBACK'：
$http.jsonp("localhost:8080/dkplus",{
params:{
'callback' : 'JSON_CALLBACK',
'tag' : 0,
'id' : 1
}
})
.success(function(data, status, header, config) {
$scope.items = data.data;
})
.error(function(data, status, header, config){
console.log('json解析错误');
})
一开始倒是挺奏效的，我看到response里面返回了一堆json对象，而且都解析出来了，然而还是不走success()方法，走了error()方法。
后来根据网上零零散散的信息，我得知这个需要后端配合，返回的数据格式必须是回调函数名+(+json+)，当时看到这个就懵了，大哥你要是给个实例该多好，像我这种初次接触jsonp的人不一定看的懂的。
那时候套用了这个方法还是不行，因为总感觉缺点什么，后来再看一遍，他所说的调用回调函数我并没有定义，于是我就在加一个回调函数JSON_CALLBACK()。
历时一个下午，jsonp()跨域访问终于成功了。
ng的jsonp()最终方案
这里总结一下思路：
- 使用
jsonp()解决跨域访问，必须在请求的地址后加上参数'callback' : 'JSON_CALLBACK'：
$http.jsonp("localhost:8080/dkplus",{
params:{
'callback' : 'JSON_CALLBACK',
'tag' : 0,
'id' : 1
}
})
.success(function(data, status, header, config) {
$scope.items = data.data;
})
.error(function(data, status, header, config){
console.log('json解析错误');
})
- 在js里定义一个方法
JSON_CALLBACK()，用于解析后端返回的数据
window.JSON_CALLBACK = function(data){
$scope.items = data.data;
}
- 后端返回的数据格式为
回调函数名+(+json+)
- 例如json为：
{
"code": 0,
"msg": "返回正常",
"data": [
{
"content": "你好世界",
"stu_name": "dk",
"ismyself": 0,
"all_hole_id": 8,
"release_time": "2016-11-25 20:09:57",
"praise_nums": 0
},
{
"content": "hello world！",
"stu_name": "dk",
"ismyself": 0,
"all_hole_id": 9,
"release_time": "2016-11-25 20:10:03",
"praise_nums": 0
}
}
- 那么后端应该返回这样的数据
JSON_CALLBACK({
"code": 0,
"msg": "返回正常",
"data": [
{
"content": "你好世界",
"stu_name": "dk",
"ismyself": 0,
"all_hole_id": 8,
"release_time": "2016-11-25 20:09:57",
"praise_nums": 0
},
{
"content": "hello world！",
"stu_name": "dk",
"ismyself": 0,
"all_hole_id": 9,
"release_time": "2016-11-25 20:10:03",
"praise_nums": 0
}
})
这样就可以正常接收和解析json数据了，但是，要注意的是
- 这时候仍然是不走success()方法的
- 之所以能接收和解析数据，是因为它走的是我们定义的回调函数JSON_CALLBACK()，所以得到数据后对数据的操作还得在这个方法里定义。
dkplus公众号.jpg
微信公众号dkplus，由前端少侠dk搭建的分享平台，主攻web前端，但也游离于设计，乐于分享他的代码故事、ps技巧和ppt技巧。码在江湖，身不由己，珍爱生命，简约设计，我是前端，也是设计。博客园：http://www.cnblogs.com/dkplus/
网友评论