php跨域jsonp,jquery+ajax+jsonp+php跨域使用方法

所谓的跨域其实就是跟后端通信:前端利用url地址扔一个函数过去给后端,然后后端接收到这个函数,把转换完成的json数据装在这个(callback)函数里并且调用返回给前端.

$.ajax({

method : "GET",

url : "http://www.example.com/test/crossDomain.php",

dataType: "jsonp",

success : function (data) {

console.log(data);

//output:{"name":"张三","age":"25","sex":"boy","skill":["Java","C++","NodeJs","PHP"]}

}

});

这个简单的例子生成的url:http://www.example.com/test/crossDomain.php?callback=jQuery214044077341514639556_1442902171702&_=1442902171703

可以看出url后面的参数:

callback=jQuery214044077341514639556_1442902171702&_=1442902171703

这些都是jquery默认生成的.

&_=1442902171703 表示生成一个时间码有助于更新缓存

crossDomain.php

$datas = array( "name"=>"张三",

"age"=>"25",

"sex"=>"boy",

"skill"=>array(

"Java",

"C++",

"NodeJs",

"PHP"

)

);

echo $_GET['callback']."(".json_encode($datas).")";

?>

请接着往下看

有必要讲一下ajax的options项jsonp以及jsonpCallback属性

例子:

$.ajax({

method : "GET",

url : "http://www.example.com/test/crossDomain.php",

dataType: "jsonp",

jsonp : "myCallback",

jsonpCallback : "myCallbackFunc",

success : function (data) {

console.log(data);

//output:{"name":"张三","age":"25","sex":"boy","skill":["Java","C++","NodeJs","PHP"]}

}

});

function myCallbackFunc(data){

console.log(data);

//output:{"name":"张三","age":"25","sex":"boy","skill":["Java","C++","NodeJs","PHP"]}

}

jsonp : “myCallback” //这是修改URL参数callback名称

callback=jQuery214044077341514639556_1442902171702

修改为:

crossDomain.php?myCallback=jQuery214044077341514639556_1442902171702&_=1442902171703

jsonpCallback : “myCallbackFunc”

修改回调函数,默认是jQuery214044077341514639556_1442902171702 一堆随机数

把它修改为:myCallbackFunc

这样就可以独立出来一个函数,不必再ajax.success里操作

crossDomain.php?myCallback=myCallbackFunc&_=1442902585937

crossDomain.php

$datas = array( "name"=>"张三",

"age"=>"25",

"sex"=>"boy",

"skill"=>array(

"Java",

"C++",

"NodeJs",

"PHP"

)

);

echo $_GET['myCallback']."(".json_encode($datas).")";

?>

还有一种使用方法直接调用$.getJSON

$.getJSON("http://www.example.com/test/crossDomain.php?myCallback=?",function(data) {

console.log(data);

//output:{"name":"张三","age":"25","sex":"boy","skill":["Java","C++","NodeJs","PHP"]}

});

博主不建议使用jsonp来获取数据,万一人家盗用数据,除非后端做了指定域名访问.