jquery中ajax跨域加載

時間 2019-11-10

標籤 jquery ajax 加載欄目 JQuery 简体版

原文原文鏈接

今天學習ajax跨域加載，先來一段代碼，異步加載的連接是愛奇藝的開源，我直接拿來用做測試javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
        *{margin:0;padding:0px;font-size: 12px;}
        a{text-decoration: none;}
        ul{list-style: none;}
        #box{width:500px;margin:20px auto;}
        .btn{display:block;width:50px;height:50px;margin:20px auto;line-height: 50px;text-align: center;border:1px #000 solid;color:#000;transition:.3s linear;}
        .btn:hover{background: #000;color:#fff;font-weight: bold;}
        #con{margin-top:20px;}
        #con li{line-height: 30px;text-align: center;}
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $('.btn').on('click', function(){
                var result='';
                $.ajax({
                    url: "http://cache.video.iqiyi.com/jp/avlist/202861101/1/",
                    type: "GET",
                    dataType: "jsonp", //指定服務器返回的數據類型
                    jsonp: 'callback',                 //將callback寫在jsonp裏做爲參數連同請求一塊兒發送
                    jsonpCallback:'jsonpCallback',
                    success: function (data) {
                        //var result = JSON.stringify(data); //json對象轉成字符串

                        picArr = data.data;
                        var vlist = picArr.vlist;//循環vlist數組能夠作下拉加贊分頁
                        console.log(vlist);

                        //console.log(result);
                        console.log(data);


                        var f = data["bmsg"]["f"];
                        var ps = data["data"]["ps"];

                        for (var i = 0; i < 10; i++){
                            result += '<li>'
                                +'<span>'+vlist[i].id+'</span>'
                                +'<span>'+vlist[i].shortTitle+'</span>'
                                +'<span>'+vlist[i].pds+'</span> <br>'
                                +'<span>'+vlist[i].plcdown["15"]+'</span>'
                                +'<span>'+vlist[i].plcdown["17"]+'</span>'
                                +'<span>'+vlist[i]["plcdown"]["15"]+'</span>'
                                +'</li>';
                        }

                        $("#con").html(result);
                    }
                });
                

            })
        })
    </script>
</head>
<body>
<div id="box">
    <a class="btn" href="javascript:;">點擊</a>
    <ul id="con"></ul>
</div>
</body>
</html>

View Code

console.log(data);打印出來的如圖

點擊加載，我這裏面循環的是10條以下圖php

說一下其餘跨域加載方法html

第一種方法java

追求永無止境，在google的過程當中，無心中發現了一個專門用來解決跨域問題的jQuery插件-jquery-jsonp。jquery

有第一種方式的基礎，使用jsonp插件也就比較簡單了，server端代碼無需任何改動。git

來看一下如何使用jquery-jsonp插件解決跨域問題吧。github

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("當前工做組:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

View Code

第二種方法web

添加響應頭，容許跨域 ajax

addHeader(‘Access-Control-Allow-Origin:*’);//容許全部來源訪問 
addHeader(‘Access-Control-Allow-Method:POST,GET’);//容許訪問的方式

還有一些是後臺配置的就很少說了json

一些開源的ajax連接

http://www.bejson.com/knownjson/webInterface/

JSON API免費接口
各類提供JSON格式數據返回服務網站的API接口
這裏爲你們蒐集了一些可以返回JSON格式的服務接口。部分須要用JSONP調用。
電商接口
淘寶商品搜索建議:
http://suggest.taobao.com/sug?code=utf-8&q=商品關鍵字&callback=cb 用例 
ps:callback是回調函數設定
物流接口
快遞接口:
http://www.kuaidi100.com/query?type=快遞公司代號&postid=快遞單號 測試用例 
ps:快遞公司編碼:申通="shentong" EMS="ems" 順豐="shunfeng" 圓通="yuantong" 中通="zhongtong" 韻達="yunda" 每天="tiantian" 匯通="huitongkuaidi" 全峯="quanfengkuaidi" 德邦="debangwuliu" 宅急送="zhaijisong"
谷歌接口
FeedXml轉json接口:
http://ajax.googleapis.com/ajax/services/feed/load?q=Feed地址&v=1.0 用例(請右擊在新窗口打開)官方文檔
備選參數:callback：&callback=foo就會在json外面嵌套foo({})方便作jsonp使用。 
備選參數:n：返回多少條記錄。
百度接口
百度百科接口:
http://baike.baidu.com/api/openapi/BaikeLemmaCardApi?scope=103&format=json&appid=379020&bk_key=關鍵字&bk_length=600用例(請右擊在新窗口打開)
查詢出錯示例以下：查看原始頁面 {"error_code":"20000","error_msg":"search word not found"}
天氣接口
百度接口:
http://api.map.baidu.com/telematics/v3/weather?location=嘉興&output=json&ak=5slgyqGDENN7Sy7pw29IUvrZ 用例官方文檔
location:城市名或經緯度 ak:開發者密鑰 output:默認xml
氣象局接口:
http://m.weather.com.cn/data/101010100.html 解析 用例
新浪接口:
http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&dfc=1&charset=utf-8 用例
參數中city若是給了參數就是相關的城市,不然會自動判斷
day=0的話是今天 
返回的參數 你們看着辦吧,具體的我也不清楚,新浪沒給API。
音樂接口
QQ空間音樂接口
http://qzone-music.qq.com/fcg-bin/cgi_playlist_xml.fcg?uin=QQ號碼&json=1&g_tk=1916754934用例 代碼解釋和下載
QQ空間收藏音樂接口
http://qzone-music.qq.com/fcg-bin/fcg_music_fav_getinfo.fcg?dirinfo=0&dirid=1&uin=QQ號&p=0.519638272547262&g_tk=1284234856
多米音樂接口
http://v5.pc.duomi.com/search-ajaxsearch-searchall?kw=關鍵字&pi=頁碼&pz=每頁音樂數
soso接口
http://cgi.music.soso.com/fcgi-bin/fcg_search_xmldata.q?source=10&w=關鍵字&perpage=1&ie=utf-8
視頻信息接口JSON在線工具
優酷
http://v.youku.com/player/getPlayList/VideoIDS/視頻ID (好比 http://v.youku.com/v_show/id_XNTQxNzc4ODg0.html的ID就是XNTQxNzc4ODg0)
愛奇藝
http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=jsonp9
土豆接口
http://api.tudou.com/v3/gw?method=album.item.get&appKey=Appkey&format=json&albumId=視頻劇集ID&pageNo=當前頁&pageSize=每頁顯示 示例(火影忍者劇集) 官方文檔
http://www.tudou.com/tvp/getMultiTvcCodeByAreaCode.action?type=3&app=4&codes=Lqfme5hSolM&areaCode=320500&jsoncallback=__TVP_getMultiTvcCodeByAreaCode 示例(火影忍者APP劇集)
地圖接口
阿里雲根據地區名獲取經緯度接口
http://gc.ditu.aliyun.com/geocoding?a=蘇州市 官方文檔
參數解釋: 緯度,經度 type 001 (100表明道路，010表明POI，001表明門址，111能夠同時顯示前三項)
阿里雲根據經緯度獲取地區名接口
http://gc.ditu.aliyun.com/regeocoding?l=39.938133,116.395739&type=001 官方文檔
獲取用戶的IP,國家代碼縮寫,經緯度
http://www.telize.com/geoip?callback=a 測試用例
參數解釋: callback是回調函數
獲取用戶經緯度，以及獲取附近建築物名/span>
http://ditu.amap.com/service/pl/pl.json?rand=635840524184357321測試用例
http://ditu.amap.com/service/regeo?longitude=121.04925573429551&latitude=31.315590522490712測試用例
IP接口
新浪接口(ip值爲空的時候 獲取本地的)
http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json&ip=218.4.255.255
淘寶接口
http://ip.taobao.com/service/getIpInfo.php?ip=63.223.108.42
手機信息查詢接口 JSON在線工具
淘寶網接口
http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手機號
拍拍接口
http://virtual.paipai.com/extinfo/GetMobileProductInfo?mobile=手機號&amount=10000&callname=getPhoneNumInfoExtCallback 用例
百付寶接口
https://www.baifubao.com/callback?cmd=1059&callback=phone&phone=手機號
115接口
http://cz.115.com/?ct=index&ac=get_mobile_local&callback=jsonp1333962541001&mobile=手機號
有道接口
http://www.youdao.com/smartresult-xml/search.s?jsFlag=true&type=mobile&q=手機號
手機在線接口
http://api.showji.com/Locating/www.showji.com.aspx?m=手機號&output=json&callback=querycallback
翻譯、詞典接口
騰訊
http://dict.qq.com/dict?q=詞語
騰訊的部分接口
獲取QQ暱稱和用戶頭像
http://r.qzone.qq.com/cgi-bin/user/cgi_personal_card?uin=QQ(不過是jsonp哦)