zoukankan      html  css  js  c++  java
  • ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口.

    -----------------------------------------------------这里是接口分割线 Begin--------------------------------------------------------------------------------------------------

    电商接口

    • 淘宝商品搜索建议:
      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

    视频信息接口

    • 优酷
      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 

    地图接口

    • 阿里云根据地区名获取经纬度接口
      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

    手机信息查询接口

    • 淘宝网接口
      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哦)

    -----------------------------------------------------这里是接口分割线 End --------------------------------------------------------------------------------------------------

    这里我只是选取了其中几个接口来做测试 , 其他的大家可以根据自己的需要来测试 !
    首先看一下第一个测试接口:  
    https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=18812345674   (这里输入的手机号是随机输入的 , 直接在浏览器打开就可以看到下面的数据: 
    __GetZoneResult_ = {
        mts:'1881234',
        province:'云南',
        catName:'中国移动',
        telString:'18812345674',
    	areaVid:'30515',
    	ispVid:'3236139',
    	carrier:'云南移动'
    }

     再看下一个测试接口:  

    https://suggest.taobao.com/sug?code=utf-8&q=商品&callback=cb     (获得的数据如下:

    cb({"result":[["商品标价签","27202"],["商品推广","14630"],["商品展示架","34265"],["商品标价签 价格牌","27112"],["商品标签贴纸","3321"],["商品标签","31882"],["商品价格标签","24871"],["商品展示柜","8392"],["商品标签牌","17382"],["商品推广f","3"]]})

    再来看一个在网上找到的接口: 

    http://askh5.com/try/data/starJson    获得的数据如下:

    { "count": "3", "records": [ { "Name" : "Messi", "Club" : "巴塞罗那" }, { "Name" : "C罗", "Club" : "皇家马德里" }, { "Name" : "鲁尼", "Club" : "曼联" } ] }

    经过测试,以上几个接口都是可以正常获取数据的,所以现在就以上面这两个接口为例,开始用ajax(jQuery的ajax方法)来获取及处理数据。

    同样的,我们先看一下使用ajax跨域获取接口数据的例子:

    $.ajax({
       url:'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=18812345674',    //这里的url就是上面测试的一个接口
       dataType:'jsonp',
       success:function(result){
           console.log(result);
       },
       error:function(){
           console.log("fail");
       }
    })
    Object { mts: "1881234", province: "云南", catName: "中国移动", telString: "18812345674", areaVid: "30515", ispVid: "3236139", carrier: "云南移动" }     //在浏览器console.log(result)得到数据

    待续----------------------------------

  • 相关阅读:
    h5 拍照上传 代码
    java jdbc 链接本地mysql数据库 报错 Access denied for user 'root'@'localhost' (using password: YES)
    react.js 中对props 的理解
    react.js 如何 设置页面div 背景图片
    关于Vue.js 和 react.js 的异同
    如何用 npm ,搭建react 项目
    如何进行vue vux版本更新
    js 继承 函数
    absolute 和 z-index妙用
    关于 white-space: pre-wrap;的灵异现象
  • 原文地址:https://www.cnblogs.com/stella1024/p/7274310.html
Copyright © 2011-2022 走看看