jsonp跨域传值
很简单,(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个元素,地址指向第三方的API网址,形如:
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
代码实现:
下面文件内容在:www.test1.com域名下,请求www.test2.com下的test2.php文件内容
<metacontent="text/html; charset=utf-8"http-equiv="Content-Type"/> <scripttype="text/javascript">
functionjsonpCallback(result) {
alert(result.name);
}
script>
<scripttype="text/javascript"src="www.test2.com/test2.php?callback=jsonpCallback">script>
以上代码需要注意:JavaScript的链接,必须在function的下面
下面文件内容在www.test2.com下的test2.php里:
header("content-type:text/html;charset=utf-8");
@$arr=array(
name=>"zhangsan",
age=>23,
sex=>'男'
);
echo$_GET['callback']."(".json_encode($arr).")";
?>
实现方式2:利用$.getJSON实现
下面文件内容在:www.test1.com域名下,请求www.test2.com下的test2.php文件内容
<scripttype="text/javascript"src="引入jquery路径">script> <scripttype="text/javascript">$.getJSON("http://www.test2.com/test2.php?callback=?",function(result) {
alert(result.name)//就可以得到name的值
}
});
script>
下面文件内容在www.test2.com下的test2.php里:
header("content-type:text/html;charset=utf-8");
@$arr=array(name=>"zhangsan",age=>23,sex=>'男'
);
echo$_GET['callback']."(".json_encode($arr).")";
?>
实现方式3:利用$.ajax实现
下面文件内容在:www.test1.com域名下,请求www.test2.com下的test2.php文件内容
<script>
$.ajax({
url:'http://www.wp.com/getData.php'//跨域到http://www.wp.com,另,http://test.com也
算跨域
type:'GET',//jsonp类型下只能使用GET,不能用POST,这里不写
默认为GET
dataType:'jsonp',//指定为jsonp类型
data:{"name":"Zjmainstay"},//数据参数
jsonp:'callback',//服务器端获取回调函数名的key,对应后台有$_GET['callback']='‘getName';ca
llback是默值
jsonpCallback:'getName',
//回调函数名
success:function(result){
//成功执行处理,对应后台返回的getName(data)方
}
alert(result.name);//可以得到zhangsan
法。
});
</
script
>
下面文件内容在www.test2.com下的test2.php里:
header("content-type:text/html;charset=utf-8");
@$arr=array(name=>"zhangsan",age=>23,sex=>'男'
);
echo$_GET['callback']."(".json_encode($arr).")";
?>