$.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> ```