频道栏目
首页 > 资讯 > JavaScript > 正文

JSONP操作02_jQ-jsonp操作_封装jsonp

17-01-04        来源:[db:作者]  
收藏   我要投稿

利用jquery框架实现jsonp访问数据

1.本地访问

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);
}

两种返回数据方法获取的本域数据形式相同



2.跨域访问

方法与非跨域访问类似,返回数据可用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);
}

 

3.jsonp封装
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);
}
相关TAG标签
上一篇:jstree的基本使用例子
下一篇:JSON教程
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站