1.直接上代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>ajax_demo</title>
6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
7 </script>
8 <style type="text/css">
9 .main{
10 width: 500px;
11 margin:0 auto;
12 text-align: center;
13 }
14 #table{
15 display: inline-block;
16 vertical-align: top;
17 border-collapse:collapse;
18 }
19 tr td{
20 width:200px;
21 border: 1px solid gray;
22 }
23 </style>
24
25
26 </head>
27 <body>
28 <!--前端Ajax实验-->
29 <div class="main">
30 <tanle id="table">
31 <tr>
32 <th>申请人省份</th>
33 <th>数量</th>
34 </tr>
35 </tanle>
36 <input type="button" value="PRINT" onclick="printtable()">
37 </div>
38 </body>
39 <script>
40 function printtable(){
41
42 $.ajax({
43 //获取URL
44 url:"http://hebutgo.com:8080/maps/getMapsList",
45 //数据类型
46 dataType:"json",
47 //获取方式
48 type:'get',
49 success:function (res) {
50 console.log(res);
51 $.each(res.result,function (index,obj) {
52 $('#table').append("<tr><td>"+obj['申请人省份']+"</td>"+
53 "<td>"+obj['counts']+"</td><tr>")
54 })
55 }
56 })
57 }
58 </script>
59 </html>
2.显示如下
