<!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>