jsonp 前端和后端的结合

来源：互联网发布：阿里云开mc服务器编辑：程序博客网时间：2024/05/21 03:28

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" onclick="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>

showJson(data)函数作为 jsonp回调函数必须存在因为后台返回的是一个有效的js函数调用字符串不存在将导致失败

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中使用

注意事项：

必须要有回调函数，回调函数必须跟后台程序返回函数名称一致本人理解有限希望大家多多指导

0 0