jsonp易于理解的简洁实例

xiaoxiao2021-02-28  77

写个小例子,检验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).')'; }
转载请注明原文地址: https://www.6miu.com/read-58024.html

最新回复(0)