在php中使用jsonp跨域请求

来源：互联网发布：mac sql 可视化工具编辑：程序博客网时间：2024/05/29 12:56

jsonp数据类型有着很大的重要性

事例：

两个网站A，和B，其中B通过jsonp接口向外提供职位查询功能，A网站通过该jsonp接口向B发起职位查询数据。

案例效果如下图：

首先创建一个查询表单页面，即search.html

代码及注释如下：

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>职位查询</title>
<script src="jquery.js"></script>
</head>
<body>
<center><br><br>
<input type="text" id="val" ><input type="button" id="dian" value="查询"><br><br>
<div id="list" style="width:300px;border:1px #000 solid;height:200px"></div></center>
<script>
var url='http://www.nine.com/invite/frontend/web/index.php?r=index/jsonp';//接口路径
//var url='jsonp.php';
$("#dian").click(function(){
var zhi=$("#val").val();
var data={zhi:zhi};//搜索值
$.get(url,data,function(msg){
//console.log(msg);
//alert(msg[0].p_name);
var html='职位：';
for (var i in msg) {
//将接到的jsonp数据进行遍历
html+='<br /> '+msg[i].p_name;
};
$('#list').append(html);
},'jsonp')//指定数据为jsonp
})
//下面的方法也可以为原生的ajax方法
/*$("#dian").click(function () {
var zhi=$("#val").val();
$.ajax({
url: url,
data:'zhi='+zhi,
dataType: "jsonp",
jsonpCallback: "aa",
success: function (msg) {
//console.log(data)
$('#list').append('职位：'+msg[0].p_name);
}
})
})*/
</script>
</body>
</html>

然后,创建一个接口，我的接口是在yii2架构中做的，当然用原生的也可以，怎么方便怎么来，

代码，我只用到一个方法，想用的可根据详情改变，

代码如下：

[html] view plain copy

//jsonp 接口查询职位
public function actionJsonp()
{
header("Access-Control-Allow-Origin: *");//同源策略跨域请求头设置
header('content-type:text/html;charset=utf8 ');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST['callback']);//把预定义的字符转换为 HTML 实体。
$zhi = htmlspecialchars($_REQUEST['zhi']);
$arr=yii::$app->db->createCommand("select * from position where p_name like :name",array(':name'=>"%$zhi%"))->queryAll();//用的like进行模糊查询
$json_data=json_encode($arr);//转换为json数据
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
}

0 0