什么是jsonp?
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
首先创建一个jsonp.php文件
文件中,代码如下:
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//把预定义的字符转换为 HTML 实体。
$arr=array(
array(
'name'=>'zhangsan',
'sex' =>'man',
'age' =>18,
),
array(
'name'=>'lisi',
'sex' =>'women',
'age' =>20,
),
array(
'name'=>'wangwu',
'sex' =>'man',
'age' =>19,
),
);
$json_data=json_encode($arr);//转换为json数据
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
再创建一个getjsonp.html文件,在同级目录中,
将jquery.js文件引入进来
文件中代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获得jsonp对象</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="val" ><input type="button" id="dian" value="点击">
<script>
var url='http://www.seven.com/lianxi/CodeIgniter-3.0/index.php/Welcome/jsonp';
//var url='jsonp.php';
$("#dian").click(function(){
var aa=$("#val").val();
var data={jsoncallback:aa};
$.getJSON(url,data,function(msg){
//console.log(msg);
alert(msg);
})
})
</script>
</body>
</html>