码迷,mamicode.com
首页 > Web开发 > 详细

搞定 jquery jsonp

时间:2014-08-13 14:55:06      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:blog   http   java   使用   os   io   ar   2014   

【前言】

以前听过跨域要用到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);
			}
		});
	});

页面,

bubuko.com,布布扣


【开始跨域】

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

bubuko.com,布布扣


【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',// 一定使用get
			async : false,// 关掉异步
			dataType : 'jsonp',// jsonp类型
			success : function(json){// json就是后台传过来的对象
				alert(json.msg);
			}
		});
	});

界面:

bubuko.com,布布扣


【定制化jquery jsonp】

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

后台:

	public void test(){
		String callback = getPara("mycallback");// 通过回调函数参数名获取回调函数名称,例如mycallback=test,最终获取的是test
		String 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',// 一定使用get
			async : false,// 关掉异步
			dataType : 'jsonp',// jsonp类型
			jsonp : 'mycallback',// 回调函数  参数 名称  例如 callback=test,mycallback=test其中的callback和mycallback,默认为callback
			jsonpCallback: 'test',// 这个test需要和后台传过来的方法对应上,比如后台传test({json}),那这里就是test
			success : function(json){// json就是后台传过来的对象
				alert(json);
			}
		});
	});

界面:

bubuko.com,布布扣


【说明】

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);
			}
		});
	});


搞定 jquery jsonp,布布扣,bubuko.com

搞定 jquery jsonp

标签:blog   http   java   使用   os   io   ar   2014   

原文地址:http://blog.csdn.net/uikoo9/article/details/38536181

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!