jsonp跨域传值

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).")";

?>

你可能感兴趣的:(jsonp跨域传值)