<!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. 关于iframe嵌套、动态获取iframe内的url、父页面重定向-2

    经过学习,发现了一种更好的办法 试验如下 1.html的内容如下: (2.html和3.html没有jquery,只有body的222和333) 结果为: 其实最容易搞糊涂的是,什么时候算self,其 ...

  2. 查询SQL 对象及存储过程

    select * from database..sysobjects order by name EXEC Sp_HelpText 'Proc_Export268';

  3. LA 4998 Simple Encryption

    题意:输入正整数$K_1(K_1 \leq 50000)$, 找一个$12$位正整数$K_2$(不能含有前导零)使得${K_1}^{K_2}\equiv K_2(mod10^{12})$. 例如,$K ...

  4. ubuntu查看内存占用和查看cpu使用情况的简单方法(ubuntu内存管理)

    单独查看内存使用情况的命令:free -m查看内存及cpu使用情况的命令:top也可以安装htop工具,这样更直观,安装命令如下:sudo apt-get install htop安装完后,直接输入命 ...

  5. ThreadLocal实现线程范围内共享

    线程范围内共享,即是对相同一段代码,在不同的模块调用时使用一份数据,而在另外一个线程中又使用另外一份数据. ThreadLocal使用set方法为一个新的线程增加一条记录,key是各自的线程,valu ...

  6. shell脚本例子集锦（习题总结）

    练习一:写一个脚本 .设定变量FILE的值为/etc/passwd .依次向/etc/passwd中的每个用户问好,并且说出对方的ID是什么 形如:(提示:LINE=`wc -l /etc/passw ...

  7. Json 入门例子(form表单)【0】

    <script> $(function () { var aa = $("#fm").serialize().replace(/\+/g, ""); ...

  8. 嵌入式linux

    嵌入式开发 1.1开发板和宿主机的连接方法:cable 电缆可以通过 串口 网络 以及 JTGA等连接方式. JTAG:国际标准测试协议对芯片内部测试对flash烧写.注意JTAG 是一种协议,具体去 ...

  9. svn转移版本库

    1.导出 svnadmin dump命令语法svnadmin dump REPOS_PATH [-r LOWER[:UPPER]] [--incremental] 示例:svnadmin dump E ...

  10. C#获取CPUID(MD5输出),网卡ID，主DNS，备用DNS

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...