使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解
更新時間：2016年12月25日 10:45:58 作者：沛東
這篇文章主要介紹了使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解,需要的朋友可以參考下
js部分
(function(window, document) {
'use strict';
var jsonp = function(url, data, callback) {
//1、掛載回調(diào)函數(shù)
var fnsuffix = Math.random().toString().replace('.', '');
var cbFuncName = 'my_json_cb' + fnsuffix;
window[cbFuncName] = callback;
//2、將data轉(zhuǎn)換成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中回調(diào)函數(shù) url+=callback=sdgade
querystring += 'callback=' + cbFuncName;
//querystring=?id=1&count=4&callback=sdgade
//4、創(chuàng)建一個script標(biāo)簽
var scriptElement = document.createElement('script');
scriptElement.src = url + querystring;
//5、把script標(biāo)簽放到頁面上
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>
結(jié)果可以返回結(jié)果，頁面顯示為，表示獲取成功！
以上所述是小編給大家介紹的使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- jQuery使用JSONP實(shí)現(xiàn)跨域獲取數(shù)據(jù)的三種方法詳解
- 通過jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請求
- JavaScript用JSONP跨域請求數(shù)據(jù)實(shí)例詳解
- 基于Jquery的跨域傳輸數(shù)據(jù)(JSONP)
- AJAX跨域請求之JSONP獲取JSON數(shù)據(jù)
- AngularJS實(shí)現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能詳解
- Ajax的jsonp方式跨域獲取數(shù)據(jù)的簡單實(shí)例
- jsonp跨域請求數(shù)據(jù)實(shí)現(xiàn)手機(jī)號碼查詢實(shí)例分析
- AJAX跨域請求JSONP獲取JSON數(shù)據(jù)的實(shí)例代碼
- jsonp跨域獲取數(shù)據(jù)的基礎(chǔ)教程
相關(guān)文章
這篇文章主要為大家介紹如何有效的處理Promise并發(fā)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
本篇文章小編為大家介紹，關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法，有需要的朋友可以參考一下2013-04-04
Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
這篇文章主要介紹了Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果,涉及鼠標(biāo)事件及頁面元素結(jié)點(diǎn)的遍歷技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動效果,涉及javascript動態(tài)操作頁面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下2015-08-08
DataJoin(數(shù)據(jù)連接)是D3中很重要的一個概念。D3是基于數(shù)據(jù)操作DOM的js庫，DataJoin使我們能夠根據(jù)現(xiàn)有?HTML?文檔中的數(shù)據(jù)集注入、修改和刪除元素。本文主要和大家詳細(xì)聊聊DataJoin的使用，感興趣的可以學(xué)習(xí)一下2022-11-11
JavaScript允許你改變站點(diǎn)的CSS表示層。如果想把用戶的眼球吸引到那些你希望他們關(guān)注的頁面元素上，改變樣式是極佳的（也是很普遍的）方式。2008-10-10
JS實(shí)現(xiàn)的五級聯(lián)動菜單效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的五級聯(lián)動菜單效果,結(jié)合完整實(shí)例形式分析了js多級聯(lián)動菜單的完整實(shí)現(xiàn)步驟,涉及JS數(shù)組遍歷、擴(kuò)展及元素節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架的安裝使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本文主要介紹了svg實(shí)現(xiàn)的動態(tài)描邊效果，文中分享了兩個實(shí)例：1.一個簡單的線一點(diǎn)一點(diǎn)畫出來的效果；2.用同樣的原理畫一個“藍(lán)胖子”。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02