我的jQuery-ajax的笔记：https://blog.csdn.net/bellediao/article/details/104239715
从其他博主那里截取的例子，并附有疑问解答。
例1：将接口中的result字段绘制成表格。
<!-- 将http://hebutgo.com:8080/maps/getMapsList接口中的result字段绘制成表格。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax例子-接口中的result字段绘制成表格</title>
<style type="text/css">
.main {
width: 500px;
margin: 0 auto;
text-align: center;
}
#table {
display: inline-block;
vertical-align: top;
border-collapse: collapse;
}
tr td {
width: 200px;
border: 1px solid gray;
}
</style>
</head>
<body>
<!-- 引入jquery -->
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function printtable() {
$.ajax({
url: 'http://hebutgo.com:8080/maps/getMapsList',
type: 'get',
datatype: 'json',
success: function (res) {
console.log(res); //在console中查看数据
$.each(res.result, function (index, obj) {
$("#table").append(
"<tr><td>" + obj['申请人省份'] + "</td>" +
"<td>" + obj['counts'] + "</td><tr>");
});
}
})
}
</script>
<!-- html -->
<div class="main">
<table id="table" >
<tr>
<th>申请人省份</th>
<th>数量</th>
</tr>
</table>
<input type="button" value="PRINT" onclick="printtable()" />
</div>
</body>
</html>
解释：
接口里数据是这样的：
{"result":[{"申请人省份":"0","counts":1553},{"申请人省份":"上海市","counts":637},{"申请人省份":"云南省","counts":81},{"申请人省份":"内蒙古自治区","counts":52},{"申请人省份":"北京市","counts":1186},{"申请人省份":"吉林省","counts":90},{"申请人省份":"四川省","counts":443},{"申请人省份":"天津市","counts":249},{"申请人省份":"宁夏回族自治区","counts":15},{"申请人省份":"安徽省","counts":1633},{"申请人省份":"山东省","counts":780},{"申请人省份":"山西省","counts":60},{"申请人省份":"广东省","counts":1575},{"申请人省份":"广西壮族自治区","counts":367},{"申请人省份":"新疆维吾尔自治区","counts":48},{"申请人省份":"江苏省","counts":1889},{"申请人省份":"江西省","counts":90},{"申请人省份":"河北省","counts":164},{"申请人省份":"河南省","counts":261},{"申请人省份":"浙江省","counts":905},{"申请人省份":"海南省","counts":20},{"申请人省份":"湖北省","counts":434},{"申请人省份":"湖南省","counts":211},{"申请人省份":"甘肃省","counts":71},{"申请人省份":"福建省","counts":277},{"申请人省份":"西藏自治区","counts":5},{"申请人省份":"贵州省","counts":108},{"申请人省份":"辽宁省","counts":199},{"申请人省份":"重庆市","counts":193},{"申请人省份":"陕西省","counts":270},{"申请人省份":"青海省","counts":15},{"申请人省份":"香港","counts":1},{"申请人省份":"黑龙江省","counts":215}],"reason":"","status":"success"}
为了方便查看，部分数据转成json数据如下：
{
"result": [{
"申请人省份": "0",
"counts": 1553
}, {
"申请人省份": "上海市",
"counts": 637
}, {
"申请人省份": "云南省",
"counts": 81
}...],
"reason": "",
"status": "success"
}
创建步骤：
1、先引入jquery。
2、html部分。是一个表格（只有一个表头）和一个打印按钮。当点击按钮，触发onclick事件，调用在js里写的带有ajax函数。
3、js部分。创建printtable()函数，里面是$.ajax。
ajax里有 url、type、datatype、success属性。在success属性里面，写了console.log（数据）和使用each循环添加到table后面。
例2：ajax获取后端经纬度例子。
<!-- 实现在页面上输入一个地址，点击获取经纬度，弹出该地址的经纬度。
url=“https://restapi.amap.com/v3/geocode/geo” key:“7486e10d3ca83a934438176cf941df0c”
（此处的key值是从此地址请求数据所需的，为data数据中的一项，直接使用即可） -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax获取经纬度例子</title>
<style type="text/css">
.button {
width: 100px;
height: 29px;
font-size: 16px;
color: white;
background-color: black;
padding: 0;
vertical-align: top;
border: 0;
}
.textbox {
height: 25px;
padding: 0;
vertical-align: top;
}
span {
font-size: 16px;
height: 29px;
line-height: 29px;
}
</style>
</head>
<body>
<!-- 引入jquery -->
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function showAddress() {
var str = document.getElementById("text").value;
$.ajax
({
url: "https://restapi.amap.com/v3/geocode/geo",
// url里面内容是：{"status":"0","info":"INVALID_USER_KEY","infocode":"10001"}
dataType: "json",
type: "get",
data: {
address: str,
key: "7486e10d3ca83a934438176cf941df0c",
},
success: function (res) {
alert(res.geocodes[0].formatted_address + "经纬度：" + res.geocodes[0].location);
console.log(res); //在console中查看数据
},
error: function () {
alert('failed!');
},
});
}
</script>
<!-- html -->
<div>
<form name="form">
<span>输入地址：</span><input id="text" class="textbox" type="text" />
<input class="button" type="button" value="获取经纬度" onclick="showAddress()" />
</form>
</div>
</body>
</html>
疑问及解答：
此实例中，通过ajax请求一个可以获取地理位置的api接口，请求方式为get，请求参数为address和key。
1、在$.ajax()方法中，包含
a. 请求参数列表data{ }
b. 成功回调函数success:function(res){ }
a中的data表示的是请求接口所用的数据，b中res表示的是请求成功后接口返回的数据，即两者的内容没有直接关系，更不要说是相同的了。
2、如何查看数据是什么？
一般来说，可通过alert以弹窗形式展示想看的数据，或通过console.log()打印到控制台查看，后者在前端开发中常用。
3、对于提到的address和key请求参数是请求url中数据所需要的，至于为什么是这两个参数？这个key的值是哪里得到的？
这是设计接口的人决定的，不是前端人员决定的。
4、“data.geocodes[0].formatted_address+"经纬度："+data.geocodes[0].location”这个语句中geocodes[0]是什么？我怎么知道.formatted_address就是地名？location就是经纬度呢？我看了url中的数据是{"status":"0","info":"INVALID_USER_KEY","infocode":"10001"}。这样看不出data返回的数据是什么样的。
建议学习一下get请求的实现方式，
如果想通过查看url得到数据，以查询“上海”为例，可以通过：https://restapi.amap.com/v3/geocode/geo?address=上海&key=7486e10d3ca83a934438176cf941df0c 查看，而非https://restapi.amap.com/v3/geocode/geo
--------
jQuery的Ajax实例（附完整代码）_JavaScript_Yuan_mingyu的博客-CSDN博客 https://blog.csdn.net/Yuan_mingyu/article/details/86748591#comments
《前端》jQuery-each遍历用法_JavaScript_bellediao的博客-CSDN博客 https://blog.csdn.net/bellediao/article/details/104571627
