<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>baidubaike.html</title>
<style>
#weather{width:60%;border:1px solid #333;margin:30px auto;border-collapse:collapse;}
th,td{border:1px solid #333}
.tr1{height:50px;font-size:20px;}
.tr2{height:100px;text-indent:50px;}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
//跨域用jsonp（如果url中带了”callback=？”，那么dataType为json；如果dataType为jsonp，那么url可以不带”callback=？”，JQ会自动在链接中加上”callback=？”）
$(function(){
var jqXHR=$.ajax({
type:"get",//jsonp形式的只能通过get传递
url:"http://baike.baidu.com/api/openapi/BaikeLemmaCardApi",
data:{"scope":103,"format":"json","appid":379020,"bk_key":"America","bk_length":600},
dataType:"jsonp",
jsonp:"callback", //在客户端注册一个callback
jsonpCallback:"successCallback"，/*自定义callback的名字（这个名字也是回调函数的名称，如果不设置，默认为jQuery自动生成的随机函数名），将它传递给后台，后台经过处理，才能返回正确的json数据*/
});
jqXHR.done(function(response){//用jqXHR对象，将基本的参数与后面DOM操作分开，不容易混淆。
var t=response.title;
var a=response.abstract;
var i=response.image;//获取图片的src，后面将它插入img中，就可以获取到相应的图片
var t_html="";
var a_html="";
var i_html="";
t_html="<tr class='tr1'><th>标题: "+t+"</th></tr>"
$("#weather").append(t_html);
a_html="<tr class='tr2'><td>摘要："+a+"</td></tr>"
$("#weather").append(a_html);
i_html="<tr class='tr3'><td><img src='"+i+"'></td></tr>";
$("#weather").append(i_html);
});
});
</script>
</head>
<body>
<table id="America">
</table>
</body>
</html>

ajax跨域jsonp的更多相关文章

  1. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

  2. 【JS】AJAX跨域-JSONP解决方案（一）

    AJAX跨域介绍 AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面 由于安全方面的原因, 客户端js使用xmlhttprequest只能用来向来源网站发送请求 ...

  3. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  4. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  5. ajax跨域jsonp —— javascript

    目录 jsonp是什么 jsonp原理 原生js使用jsonp jquery使用jsonp jsonp是什么 jsonp作用:解决跨域问题 为什么有跨域问题? “同源策略限制了从同一个源加载的文档或脚 ...

  6. Ajax 跨域，这应该是最全的解决方案了

    https://segmentfault.com/a/1190000012469713 前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了 ...

  7. ajax跨域，这应该是最全的解决方案了

    前言 从刚接触前端开发起,跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了,16年时也整理过一篇相关文章,但是感觉还是差了点什么,于是现在重新梳理了一下. 个人见 ...

  8. ajax 跨域----好用的解决方案

    一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...

  9. ajax跨域 （转）

    题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器”同源策略”中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍), ...

随机推荐

  1. ACM题目————The partial sum problem

    描述 One day,Tom’s girlfriend give him an array A which contains N integers and asked him:Can you choo ...

  2. Oracle连接字符串C#

    Password=密码;User ID=ID;Data Source=(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = ...

  3. Unity帧序列实时渲染脚本

    该脚本会创建一个新相机进行录制,支持包含所有相机内容,完美解决跳帧问题,可自定义分辨率等参数,脚本会输出品质为100的jpg序列,基本无损. 但缺点是帧率始终是每秒100帧,必须压制时限制帧数. 而用 ...

  4. 大型网站技术架构介绍--squid

    一.大型网站技术架构介绍 1.pv高  ip高 并发量 2.大型网站架构重点    1. 高性能:响应时间,TPS,系统性能计数器.缓存,消息队列等.     高可用性High Availabilit ...

  5. Repeater的Command操作

    Repeater的Command操作 1.ItemCommand事件 :在Repeater中所有能触发事件的控件,都会来触发这一个事件 后台创建:在Page_Load中 Repeater1.ItemC ...

  6. 学习html5第一天

    HTMl5作为web标准的一种,在2004年诞生,web超文本应用技术工作组WHATWG将它发展起来,W3C由开始的不赞同到与WHATWG共同合作,并在2015年开始推广.并随着浏览器的不断支持和兼容 ...

  7. CodeForces 432B Football Kit

     Football Kit Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Subm ...

  8. 【原文】前端程序员必须知道的高性能Javascript知识

    原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...

  9. Download file using libcurl in C/C++

    http://stackoverflow.com/questions/1636333/download-file-using-libcurl-in-c-c #include <stdio.h&g ...

  10. 基于ADL5317的雪崩光电二极管（APD）偏压控制/光功率监测电路的设计

    1 引言 目前,雪崩光电二极管(APD)作为一种高灵敏.能精确接收数据和测量光功率的光探测器件广泛应用于光纤传感.光纤通信网络中.它借助于内部强电场作用产生雪崩倍增效应,具有极高的内部增益(可达102 ...