<!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. 实现multbandblend

    一.首先实现 laplacian金字塔的分割和重构 #include "stdafx.h" #include <iostream> #include <vecto ...

  2. Eclipse 中outline的小图标的含义(zend也一样)

    颜色:绿色:public黄色:protected蓝色:no modifier红色:private形状:实心:method空心:variable实心中间有字母C:classClass右侧有向右的箭头:运 ...

  3. Testing Round #12 A

    A. Divisibility time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. InstallShield 打包时需要注意

    32位的程序可以在64位运行,但64位的程序不能再32位上运行 32位的包和64位的包要分开打,不然在32位的机器上安装不上

  5. Linux 运维工程师的十个基本技能点

    本人是linux运维工程师,对这方面有点心得,现在我说说要掌握哪方面的工具吧. 说到工具,在行外可以说是技能,在行内我们一般称为工具,就是运维必须要掌握的工具.我就大概列出这几方面,这样入门就基本没问 ...

  6. css做的后台管理页面，不考虑ie8一下的

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. js 返回并刷新

    chrome 下 history.back()或者history.go(-1)都是返回并刷新的,但是ff浏览器只返回不刷新 location = document.referrer 这个在两个浏览器下 ...

  8. [转]What you need to know about transimpedance amplifiers – part 1

    Transimpedance amplifiers (TIAs) act as front-end amplifiers for optical sensors such as photodiodes ...

  9. 07.常用的SQL语句

    常用SQL语句,仿照着写(只改动字段和表名,库名) 查看数据库引擎                SHOW ENGINES;(默认InnoDB) 用数据库生成UUID            selec ...

  10. ubuntu下导入kali源

    Kali-Linux之前的渗透神器BackTrack是基于Ubuntu的,界面比较友好,字体渲染看起来也比较舒服(也可能是本人用惯了 Ubuntu的缘故).后来官方终止BackTrack,开发Kali ...