利用jquery框架实现jsonp访问数据
php数据文件用于访问本地数据库,并将数据返回给回调函数
<?php $conn = mysqli_connect("localhost","root","","html5-7"); $conn->query("set names utf8"); $cb = $_GET['cb'];//获取函数名 $sql = "SELECT * FROM user"; $ret = $conn->query($sql); $arr = array(); while($row = $ret->fetch_assoc()){ $arr[] = $row; } //数组转换为json格式 $str = json_encode($arr); echo $cb."({$str})";
利用jquery框架进行jsonp访问代码格式类似于ajax
$.ajax({ //jsonp只有get url: "jsonp.php", dataType: "jsonp", jsonp: "cb",// 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名( 一般默认为:callback) data:{}, success: function (data) { console.log(data); }, error: function () { console.log('fail'); } });
此外,如果不使用ajax中的success返回数据,也可以用jsonpCallback函数返回结果
$.ajax({ //jsonp只有get url: "jsonp.php", dataType: "jsonp", jsonp: "cb",// 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名( 一般默认为:callback) jsonpCallback: "abc"//自定义的jsonp回调函数名称,默认为jQuery自动生成 的随机函数名,也可以写"?",jQuery会自动为你处理数据 }); //不用sucess用jsonpCallback也可以 function abc(data){ console.log(data); }
两种返回数据方法获取的本域数据形式相同
方法与非跨域访问类似,返回数据可用success接收或者回调函数接收
$.ajax({ //jsonp只有get url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/ su?wd=游戏&cb=abc", dataType: "jsonp", jsonp: "cb",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名 (一般默认为:callback) jsonpCallback: "abc",//自定义的jsonp回调函数名称,默认为jQuery自动生成 的随机函数名,也可以写"?",jQuery会自动为你处理数据 }); //不用sucess用jsonpCallback也可以 function abc(data){ console.log(data); }
jsonp({ url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", jsonp:"cb", data:{wd:"动画"}, sucess:function(data){ console.log(data); } }) //封装函数 function jsonp(option){ //定义一个函数名,加了时间戳为了防止命名冲突 var cb = "json"+new Date().getTime();// 定义cb函数,使用时间使名字不一样,防止冲突 //将cb转化为全局函数 window[cb] = option.sucess; //用来传输数据给后台,用于调用该函数传数据参数 option.data[option.jsonp] = cb; //把json格式的data数据转为类似{"name":"dada","age":12,"cb":cb}格式 var arr = []; for(var key in option.data){ arr.push(key+"="+option.data[key]); } var str = arr.join("&"); //var str = "name=dada&age=12&cb=jsonp12331232132"; //script标签跨域请求数据 var script = document.createElement("script"); script.src = option.url+"?"+str; document.body.appendChild(script); document.body.removeChild(script); }