今天学习ajax跨域加载，先来一段代码，异步加载的链接是爱奇艺的开源，我直接拿来用作测试

<!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>
console.log(data);打印出来的如图

点击加载，我这里面循环的是10条如下图

说一下其他跨域加载方法

第一种方法

追求永无止境，在google的过程中，无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。

有第一种方式的基础，使用jsonp插件也就比较简单了，server端代码无需任何改动。

来看一下如何使用jquery-jsonp插件解决跨域问题吧。

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);

  }

});

第二种方法

添加响应头，允许跨域

addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问

addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

还有一些是后台配置的就不多说了

一些开源的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哦)

jquery中ajax跨域加载的更多相关文章

  1. jquery中ajax跨域的写法

    由于JS同源策略的影响,因此js只能访问同域名下的文档.因此要实现跨域,一般有以下几个方法: 一.处理跨域的方式: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2 ...

  2. jquery中ajax跨域提交的时候会有2次请求

    我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的. 解决方法就是在服务端中加一层过滤HTTP请求的类型,把OPTION等不用的类型过滤掉.就是当请求为非 H ...

  3. JQuery中ajax跨域问题

    var url = "http://apis.juhe.cn/idcard/index?key=e0a6277420506b2816b82f7d7821976c&cardno=&qu ...

  4. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

  5. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  6. JQuery实现ajax跨域

    AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...

  7. jQuery使用ajax跨域请求获取数据

    jQuery使用ajax跨域请求获取数据  跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...

  8. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  9. JQuery的Ajax跨域请求的

    JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...

随机推荐

  1. SPI通讯（Serial Peripheral interface）

    1. SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线:SCLK,MISO,MOSI,CS 2. SPI结构简图: 可以看出,SPI主从设备两端都有一个位移寄存器,数据在位 ...

  2. Socket简单Demo

    Socket协议网上介绍的有很多了,就不在画蛇添足了,本文主要编写一个小Demo,介绍下它具体实现 一:Socket服务器端 package com.founderit; import java.io ...

  3. wireshark抓包新手教程（win10空包问题）

    首先下载官网的wireshark,下载地址https://www.wireshark.org/ 下载完按照提示一步步安装 安装完打开wireshark,安装中文包 安装之前首先讲一下win10截图工具 ...

  4. SAS学习笔记58 单元格格式化设计

    单元格行_row_ 对于行单元格,主要就通过_row_这么一个自动变量的方式,来对单元格所有行进行格式化设计 例如,对性别为“男”的单元格所在行颜色设定为红色: 单元格列_col_ 将_row_改成_ ...

  5. Matlab图像处理基础知识

    Matlab图像处理基础知识 Matlab的图片以矩阵的形式存储,矩阵的行列值为图片的行列的色彩值. 1图像表达方式: 像素索引 图像被视为离散单元.如使用I(2,2)可以获取第二行第二列的像素值 空 ...

  6. ZeroMQ自查手册

    简介 ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在 ...

  7. 【CH1809】匹配统计（KMP）

    题目链接 摘自https://www.cnblogs.com/wyboooo/p/9829517.html 用KMP先求出以a[i]为结尾的前缀与b匹配的最长长度. 比如 f[i] = j,就表示a[ ...

  8. 2019北航OO第三单元作业总结

    1.梳理JML语言的理论基础.应用工具链情况 JML基础理论: JML(Java Modeling Language)是用于对Java程序进行规格化设计的一种表示语言.JML是一种行为接口规格语言,基 ...

  9. Appscan漏洞之跨站点请求伪造（CSRF）

    公司前段时间使用了Fortify扫描项目代码,在修复完这些Fortify漏洞后,最近又启用了Appscan对项目代码进行漏洞扫描,同样也是安排了本人对这些漏洞进行修复.现在,针对修复过的Appscan ...

  10. web项目中添加定时任务

    1.在web.xml中添加servlet <servlet> <servlet-name>StatisticInitServlet</servlet-name> & ...