js部分
(function(window, document) { 'use strict'; var jsonp = function(url, data, callback) { //1、掛載回調函數 var fnsuffix = Math.random().toString().replace('.', ''); var cbFuncName = 'my_json_cb' + fnsuffix; window[cbFuncName] = callback; //2、將data轉換成url字符串的形式 //{id=1,count=4}==>id=1&count=4 var querystring = url.indexOf('?') == -1 ? '?' : '&'; //判斷url中最后是否有？，沒有則為？ for (var key in data) { querystring += key + '=' + data[key] + '&'; } //3、處理url中回調函數 url+=callback=sdgade querystring += 'callback=' + cbFuncName; //querystring=?id=1&count=4&callback=sdgade //4、創建一個script標簽 var scriptElement = document.createElement('script'); scriptElement.src = url + querystring; //5、把script標簽放到頁面上 document.body.appendChild(scriptElement); }; window.$jsonp = jsonp;})(window, document)在頁面中測試
<!DOCTYPE html><html><head> <title>jsonp</title></head><body> <div id="htt"></div> <script type="text/javascript" src="http.js"></script> <script> (function(){ $jsonp('http://api.douban.com/v2/movie/in_theaters',{}, function(data){ document.getElementById('htt').innerHTML=JSON.stringify(data); }); })() </script></body></html>結果可以返回結果，頁面顯示為，表示獲取成功！
以上所述是小編給大家介紹的使用jsonp實現跨域獲取數據實例講解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
