您好,登錄后才能下訂單哦!
小編給大家分享一下jsonp進(jìn)行跨域獲取數(shù)據(jù)的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
jsonp跨域獲取數(shù)據(jù)小解
由于瀏覽器有同源策略,所以要想獲取非同源(協(xié)議,域名,端口三者有一不同都算非同源)的頁(yè)面的數(shù)據(jù),就得進(jìn)行跨域
(1) jsonp原理
由于script標(biāo)簽的src屬性可以訪問(wèn)非同源的js腳本,所以通過(guò)src屬性訪問(wèn)服務(wù)器會(huì)返回函數(shù)的js代碼,而我們想要的數(shù)據(jù)就作為函數(shù)參數(shù)返回,而我們會(huì)先定義這個(gè)函數(shù),返回的js代碼就可執(zhí)行
(2) jsonp實(shí)現(xiàn)代碼
請(qǐng)求頁(yè)面
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function jsonp(data){ console.log(username) } </script> <script type="text/javascript" src="jquery-1.8.3.min.js"> </script> <script type="text/javascript"> $(document).ready(function(){ var url = "http://www.example.com/jsonp.php?callback=jsonp"; var script = $('<script><\/script>'); script.attr("src",url); $("body").append(script); }); </script> </body> </html>
<?php $data = {'name': '張三'}; $callback = $_GET['callback']; echo $callback."(".json_encode($data).")"; ?php>
之后php會(huì)返回
jsonp({ name:'niuni })
然后PHP返回的代碼h會(huì)被請(qǐng)求頁(yè)面的jsonp方法執(zhí)行
(3)jQuery的簡(jiǎn)便jsonp跨域
<script> function showData (data) { console.info(data); } $(document).ready(function () { $("#btn").click(function () { $.ajax({ url: "http://www.example.comjsonp", type: "GET", dataType: "jsonp",// 返回?cái)?shù)據(jù)類型 jsonpCallback: "showData",//回調(diào)函數(shù) // 獲取數(shù)據(jù)成功就執(zhí)行success函數(shù) success: function (data) { console.info("data"); } }); }); }); </script>
看完了這篇文章,相信你對(duì)jsonp進(jìn)行跨域獲取數(shù)據(jù)的方法有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。