$.getjson方法配合在url上传递callback=?参数,实现跨域 · PHP笔记

test.json ``` { "total":3, "rows":[ { "userId":1, "realName":"张梅", "headUrl":"href='teacherDetail.html'", "img":"src='images/teacher.jpg'", "introduction":"热情大方。" },{ "userId":2, "realName":"张三", "headUrl":"href='teacherDetail.html'", "img":"src='images/teacher.jpg'", "introduction":"热情大方。" },{ "userId":3, "realName":"李斯", "headUrl":"href='teacherDetail.html'", "img":"src='images/teacher.jpg'", "introduction":"热情大方" } ] } ``` jquery代码 ``` <body> <div> <h1>haha</h1> <span id="div1"></span> </div> </body> <script type="text/javascript"> $.getJSON('test.json', function(data){ for (var i = 0; i < data.rows.length; i++) { $('#div1').append('<p>' + data.rows[i].realName + '</p>'); } }); </script> ``` 在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。注意：此行以后的代码将在这个回调函数执行前执行。 JSONP能够实现跨域请求JS，但是不能够跨域请求数据，有callback是代表它要在另外一个资源那里请求一个等于callback的方法，这个方法里面包装了JS片段，如果没有这个包装就是数据了，JS不能够跨域请求数据。。。 ### **$.getjson方法配合在url上传递jsoncallback=?参数,实现跨域获取指定网站某商品访问量** across.php文件在域名www.cms.com程序中 ``` <html> <body> <div id="pv">99</div> <script type="text/javascript" src='/js/jquery-1.6.2.min.js';></script>  <script type="text/javascript"> var contentid = 266; $(function(){ $.getJSON( 'http://www.test.com/getjson.php?jsoncallback=?&contentid='+contentid, //跨域访问www.test.com网站内容 function(data){ if(data){ $('#pv').html(data.pv); } } ); }); </script> </body> </html> ``` www.test.com网站中的getjson.php文件 ``` class test{ function stat(){ $contentid = intval($_GET['contentid']); //使用model对象,获取库中对于的pv.设置为4569测试用 $info['pv'] = 4569; //$data = json_encode($info); //必须转换成json数据 echo $_GET['jsoncallback'].'('. json_encode($data). ')'; //必须拼接jsoncallback.需要在括号里面写入返回的json数据 } } $t = new test(); $t->stat();//返回的是 jQuery16208416769483592361_1458110715864({"pv":4569}); ``` **$.getJSON()方法的 callback说明** url的后缀最后带一个"callback=?"的参数作为成功的回调函数如： ``` var url = "xxx.php?act=add&siteId=2&accountId=388&callback=?"; $.getJSON(url, {} , function(data) { var code = data.code; if(code == 0){ $('#floatOne').myFadeIn(); } }); ``` 此时返回的data是一个json对象；相应地，服务器返回字符串应该要这种样式：原理：Jquery在解析请求callback=?的时候，会自动生成一个callback=jsonpxxoo的字符串，这个字符串jsonpxxoo在成功回调的时候作为一个方法，被Jquey自动执行，参数是一个json格式的字符串（这里是data）。相应地；服务器返回的字符串要这种形式：jsonpxxoo(JSONObject)。如：刚上面的url被Jquey解析成： Request URL: `http://localhost/xxx.php?act=add&siteId=2&accountId=388&callback=jsonp1381976698163&_=1381976708919` 服务器返回的字符串形式： jsonp1381976698163({"code":0,"msg":"增加用户成功"}) Jquery的回调方法jsonp1381976698163(jsonStr)就是要把字符串jsonStr转换成josn对象,这里就是转换成data这个json对象。 ``` <?php if (isset($_GET['callback']) && $_GET['act'] == "rt" && isset($_GET['callback'])){ $df="123456"; $arr=array('freeSpace'=>"$df"); $jarr=json_encode($arr); echo $_GET['callback'],'(',$jarr,')'; exit; } ?> <!DOCTYPE html> <html> <head> <title>test</title> </head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ getJSONData(); }); function getJSONData() { setTimeout("getJSONData()", 1000); $.getJSON('?act=rt&callback=?', function(dataJSON){ $("#div1").html(dataJSON.freeSpace); console.log(1) }); } </script> <body> <div> <h1>haha</h1> <span id="div1"></span> </div> </body> </html> ```