jsonp易于理解的简洁实例

1 篇文章 0 订阅

写个小例子,检验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>

效果为:
jsonp
成功获取到值!

实例 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).')';
    }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值