html代码（test.html），js在html底部
具体代码如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test-jquery-ajax-list</title> 6 </head> 7 <body> 8 <div class="main"> 9 <table> 10 <thead> 11 <tr> 12 <th>id</th> 13 <th>name</th> 14 <th>sex</th> 15 <th>time </th> 16 </tr> 17 </thead> 18 <tbody id="infolist"> 19 </tbody> 20 </table> 21 </div> 22 </body> 23 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script> 24 <script type="text/javascript"> 25 $(document).ready(function(){ 26 getList(); 27 function getList(){ 28 // jquery ajax 请求 29 $.ajax({ 30 type:'post', //请求方式，默认get 31 url :"http://localhost/ajax-demo-list/test.php", 32 data:{ 33 getFunction:1 34 },success:function(data,status){ 35 $('#infolist').html(''); 36 $str = ''; 37 $.each(data.list,function(i,val){ 38 $str = $str + '<tr>'; 39 $str = $str + '<td> '+val.id+' </td>'; 40 $str = $str + '<td> '+val.name+' </td>'; 41 $str = $str + '<td> '+val.sex+' </td>'; 42 $str = $str + '<td> '+val.time+' </td>'; 43 $str = $str + '</tr>'; 44 }); 45 $('#infolist').append($str); 46 if(data.list == "" || data.list.length < 0 || data.list == "undefined"){ 47 $('#infolist').html('<td colspan="10" style="height:200px;text-align:center;color: #23527c">暂无相关数据...</td>'); 48 } 49 },error:function(data,statsu){ 50 alert("发送请求失败！"); 51 } 52 }); 53 } 54 }); 55 </script> 56 </html>
php代码 （test.php）
1 <?php 2 header("Content-Type: application/json;charset=utf-8"); 3 if($_REQUEST['getFunction']){ 4 getList(); 5 } 6 function getList(){ 7 $data = array( 8 array( 9 'id' => 1, 10 'name' => 'xiaoming', 11 'sex' => '男', 12 'time' => '2016年1月22日 14:45:46' 13 ), 14 array( 15 'id' => 2, 16 'name' => '老张', 17 'sex' => '男', 18 'time' => '2016年1月22日 14:45:46' 19 ), 20 array( 21 'id' => 3, 22 'name' => '捞王', 23 'sex' => '男', 24 'time' => '2016年1月22日 14:45:46' 25 ) 26 ); 27 $list = json_encode(array('list'=>$data)); 28 print_r($list); 29 // print_r(json_encode(array('list'=>$data=array()))); 30 }