搞定 jquery jsonp

【前言】

以前听过跨域要用到jsonp，今天早上突然有需求要用到jsonp，

这几天比较烦躁，在网上看例子，都是说的一堆一堆的的，但是前台后台的代码却没有，很是郁闷，

下午花点时间研究了下jsonp，搞清楚了是怎么回事。

【推荐文章】

这个文章比我说的好，推荐看看：

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

【不跨域ajax】

后台，

简单的传了一个json对象，其中msg属性的值为test：

public void test(){renderJson(new QJson("test"));}

前台，

获取传过来的对象的msg属性：

$(function(){$.ajax({url : 'http://localhost/com/test',data : {},type : 'get',async : false,dataType : 'json',success : function(json){alert(json.msg);}});});

页面，

【开始跨域】

将localhost换为具体的ip，由于地址请求的是localhost，而ajax中是具体ip，所以就跨域了：

【jsonp】

后台：

public void test(){String callback = getPara("callback");// 获取页面的回调函数名称String json = JsonKit.toJson("ssss");// 将对象转为json字符串String res = callback + "(" + json + ")";// 其实就是调用客户端的callback函数，括号内为要传的对象renderJson(res);}

前台：

$(function(){$.ajax({url : 'http://192.168.0.116/com/test',data : {},// 这里可以传一些参数type : 'get',// 一定使用getasync : false,// 关掉异步dataType : 'jsonp',// jsonp类型success : function(json){// json就是后台传过来的对象alert(json.msg);}});});

界面：

【定制化jquery jsonp】

其实使用上面的方法完全可以满足需求，下面是一些定制：

后台：

public void test(){String callback = getPara("mycallback");// 通过回调函数参数名获取回调函数名称，例如mycallback=test，最终获取的是testString json = JsonKit.toJson("ssss");// 将对象转为json字符串String res = callback + "(" + json + ")";// 其实就是：   test({json})renderJson(res);}

前台：

$(function(){$.ajax({url : 'http://192.168.0.116/com/test',data : {},// 这里可以传一些参数type : 'get',// 一定使用getasync : false,// 关掉异步dataType : 'jsonp',// jsonp类型jsonp : 'mycallback',// 回调函数  参数 名称  例如 callback=test,mycallback=test其中的callback和mycallback，默认为callbackjsonpCallback: 'test',// 这个test需要和后台传过来的方法对应上，比如后台传test({json})，那这里就是testsuccess : function(json){// json就是后台传过来的对象alert(json);}});});

界面：

【说明】

1.jsonp和jsonpCallback

jsonp：回调函数名称的参数名

jsonpCallback：回调函数名称

例如：url?jsonp=jsonpCallback

url?callback=test

2.jsonpCallback

页面不需要再写对应的方法了，jquery会封装到success中

【end】

最终好用的，简单的代码：

后台：

public void test(){String callback = getPara("callback");String json = JsonKit.toJson("ssss");String res = callback + "(" + json + ")";renderJson(res);}

前台：

$(function(){$.ajax({url : 'http://192.168.0.116/com/test',data : {},type : 'get',async : false,dataType : 'jsonp',success : function(json){alert(json);}});});