<!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. selenium帮助手册以及 webdriver的各种driver

    帮助手册 http://selenium-python.readthedocs.io/locating-elements.html 转载于:http://blog.csdn.net/five3/art ...

  2. http模式

    http遵守请求响应模式: 请求: 请求行:HTTP方法-请求的URL-HTTP版本 请求行 空行 消息体 响应: 状态行:HTTP版本-响应码-响应描述 响应头 空行 消息体 其他的重点: http ...

  3. Less/Sass编译工具

    less中午网站有详细的说明:http://www.1024i.com/demo/less/ 那里我使用的koala   全平台支持,国产.下载地址:http://koala-app.com/inde ...

  4. List<T>

    List<FormEntity> formEntity = new List<FormEntity> (){new FormEntity{ IsFile = true,Name ...

  5. HDU1757 A Simple Math Problem 矩阵快速幂

    A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  6. UIEdgeInsetsMake, CGRectOffset等API参数详解

    1, UIEdgeInsetsMake ( CGFloat top, CGFloat left, CGFloat bottom, CGFloat right ) 2,position点是相对suerL ...

  7. 完成Adventure中的主方法

    package a; public interface CanSwim { void swim(); } package a; public interface CanFly { void fly() ...

  8. RC4加密解密算法

    RC4相对是速度快.安全性高的加密算法.在实际应用中,我们可以对安全系数要求高的文本进行多重加密,这样破解就有一定困难了.如下测试给出了先用RC4加密,然后再次用BASE64编码,这样双重锁定,保证数 ...

  9. 3d中的向量

    向量基础知识 向量有且仅有的两个属性:方向长度(注意:向量性情中不包含位置信息) 向量相等就是其两个属性相等 向量处理标记位置:当向量的起始点与坐标原点重合,这样我们就可以用向量的终点坐标来描述一个处 ...

  10. DevExpress所有的窗体，使用同一款皮肤

    https://www.devexpress.com/Support/Center/Question/Details/K18516 To accomplish your task, please ex ...