使用AJAX的JSONP类型跨域请求的方法和示例

  •   
  • 972
  • jquery
  • 36
  • dodobook
  • 2016/09/22

最近在学习使用ajax的jsonp的数据类型进行跨域请求,jsonp的形式的接口数据请求和返回是不一样的。是返回callback形式的。直接上示例代码,实现功能为主,理论知识自行百度google.

AJAX部分请求接口


//不跨域的情况下面默认
$.getJSON("http://aaa.dodobook.net/ulogin.php", {user_id:'4999'}, function(data){
	alert(data);
});


//跨域的情况下
$.ajax({
	url: 'http://bbb.dodobook.net/ulogin.php',
	data: {user_id:'4999', user_name:'dodobook'},
	dataType: "jsonp",
	jsonp: "callback",		//服务端用于接收callback调用的function名的参数
	async : true,
	type: 'get',   //有网友说post不行,但是我试了是可以的???待研究
	success: function (e) {   //成功后回调
		alert(e.msg);
	},
	error: function(e){    //失败后回调
		alert(e.msg);
	},
});


PHP接口返回信息如下

$user_id = $_GET['user_id'] ?? '3888';  //接收参数
$user_info = 'cookie_'.$user_id.'_dodobook'; //组装参数

setcookie("user_info", $user_info,time()+3600,'/','dodobook.net'); //写cookie

//服务端返回JSON数据  
$arr=array('code'=>1,'msg'=>'bbb_login_OKKK');  
$result=json_encode($arr);  
//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)"; 


//真正请求的url为
//http://bbb.dodobook.net/ulogin.php?callback=jQuery2140960437487804561_1474556651992&user_id=4999&user_name=dodobook&_=1474556651993

//真正返回的值为
//jQuery2140960437487804561_1474556651992({"code":1,"msg":"bbb_login_OKKK"})

一切都明明白白,但我们仍匆匆错过,因为你相信命运,因为我怀疑生活。