写个小例子,检验jsonp的使用方法及过程:
php代码部分:
<?php
$er=$_GET['callback'];
$arr=Array('one'=>'张三','two'=>'李四');
echo $er."(".json_encode($arr).")";
?>
页面的js代码部分:
<!DOCTYPE html>
<html>
<head>
<title>测试jsonp</title>
<script type="text/javascript" src="/public/js/jquery-1.9.0.min.js"></script>
</head>
<body>
</body>
<script>
$.ajax({
url:"http://localhost:84/test.php?callback=goodfo",
dataType:"jsonp",
success:function(data){
console.log(data);
alert(data.one);
}
});
</script>
</html>
效果为:
成功获取到值!
实例 2
前端部分
//验证绑定账号密码(使用jsonp实现跨域)
$('#bind_btn').click(function () {
var hidden_url=$('#hidden_url').val();
var act=$('#account_bind').val();
var pwd=$('#password_bind').val();
$.ajax({
type: "get",
async: true,
url: hidden_url,
data:{'act':act,'pwd':pwd},
dataType: "jsonp",
jsonp: "mycallback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"checkAutoLogin",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(data){
//console.log(data);
if(data.httpCode==200){
console.log('系统A信息验证成功!');
}
},
error: function(){
console.log('系统A信息验证失败!');
}
});
})
服务器部分
public function index(){
$name_fun=$this->input->get('mycallback');
$account=trim($this->input->get('act'));
$password=md5(trim($this->input->get('pwd')));
$data=array(
'httpCode'=>'200'
);
echo $name_fun.'('.json_encode($data).')';
}