快捷導(dǎo)航

使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解

更新時(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中最后是否有？，沒(méi)有則為？
    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)建一個(gè)script標(biāo)簽
    var scriptElement = document.createElement('script');
    scriptElement.src = url + querystring;
    //5、把script標(biāo)簽放到頁(yè)面上
    document.body.appendChild(scriptElement);
  };
  window.$jsonp = jsonp;
})(window, document)

在頁(yè)面中測(cè)試

<!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é)果，頁(yè)面顯示為，表示獲取成功！

以上所述是小編給大家介紹的使用jsonp實(shí)現(xiàn)跨域獲取數(shù)據(jù)實(shí)例講解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

jsonp
跨域

相關(guān)文章

一文詳解如何有效的處理Promise并發(fā)
這篇文章主要為大家介紹如何有效的處理Promise并發(fā)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
本篇文章小編為大家介紹，關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法，有需要的朋友可以參考一下
2013-04-04
Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
這篇文章主要介紹了Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果,涉及鼠標(biāo)事件及頁(yè)面元素結(jié)點(diǎn)的遍歷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)可旋轉(zhuǎn)的圓圈實(shí)例代碼,可實(shí)現(xiàn)圓圈的旋轉(zhuǎn)與運(yùn)動(dòng)效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性及進(jìn)行相應(yīng)數(shù)學(xué)運(yùn)算的技巧,需要的朋友可以參考下
2015-08-08
D3.js入門之D3?DataJoin的使用
DataJoin(數(shù)據(jù)連接)是D3中很重要的一個(gè)概念。D3是基于數(shù)據(jù)操作DOM的js庫(kù)，DataJoin使我們能夠根據(jù)現(xiàn)有?HTML?文檔中的數(shù)據(jù)集注入、修改和刪除元素。本文主要和大家詳細(xì)聊聊DataJoin的使用，感興趣的可以學(xué)習(xí)一下
2022-11-11
ppk談JavaScript style屬性
JavaScript允許你改變站點(diǎn)的CSS表示層。如果想把用戶的眼球吸引到那些你希望他們關(guān)注的頁(yè)面元素上，改變樣式是極佳的（也是很普遍的）方式。
2008-10-10
JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的五級(jí)聯(lián)動(dòng)菜單效果,結(jié)合完整實(shí)例形式分析了js多級(jí)聯(lián)動(dòng)菜單的完整實(shí)現(xiàn)步驟,涉及JS數(shù)組遍歷、擴(kuò)展及元素節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下
2017-02-02
Bootstrap框架安裝使用詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap框架的安裝使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
svg動(dòng)畫之動(dòng)態(tài)描邊效果
本文主要介紹了svg實(shí)現(xiàn)的動(dòng)態(tài)描邊效果，文中分享了兩個(gè)實(shí)例：1.一個(gè)簡(jiǎn)單的線一點(diǎn)一點(diǎn)畫出來(lái)的效果；2.用同樣的原理畫一個(gè)“藍(lán)胖子”。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02