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 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 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.显示如下
