jsonp一个熟悉的名字，做为一个不牛逼的前端总是不断的复制别人写的跨域调用，今天终于理解了跨域ajax请求前端和后端的结合了。
本人理解上可能有误，如有错误请忽略
首先稍微理解下jsonp，
jsonp我今天的理解就是浏览器跨域请求返回一个js函数字符串，返回一个有效的可执行的js标签。
上案例
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨域调用</title>
<script type="text/javascript" src="jquery.mini.js"></script>
</head>
<body>
<input type="button" οnclick="getTime()" value="跨域按钮">
<script type="text/javascript">
function showJson(data){
//result= data;
alert(data);
}
function getTime(){
var url = 'http://yichou.com:81/zhang.php?callback=showJson';
$.ajax({
url:url,
dataType:"jsonp",
success: function(msg){
alert(msg.err);
},
error:function(){
alert('请求失败');
}
});
}
</script>
</body>
</html>
var url = 'http://yichou.com:81/zhang.php?callback=showJson'; 此处跟其他的ajax调用一样 是请求的url 注意 此处必须传递要一个参数 做为jsonp的回调函数 就是定义的showJson函数
dataType:"jsonp" 定义为jsonp
其他的参数就不做解释了
php
$data = json_encode(array('err'=>'跨域调用','code'=>'你错了'));
echo $_GET['callback'].'('.$data.')';此处就可以看到传递的callback的用处
后台返回的就是回调函数即
showJson('{"err":"\u8de8\u57df\u8c03\u7528","code":"\u4f60\u9519\u4e86"}')
返回的是一个有效的可执行的js函数调用的字符串
请求成功 $data 就作为返回的结果可在success中使用
注意事项：
必须要有回调函数，回调函数必须跟后台程序返回函数名称一致 本人理解有限 希望大家多多指导
扫一扫
3165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
