你的位置:首页 > Java教程

[Java教程]jQuery ajax 请求php遍历json数组到table中


html代码(test.html),js在html底部<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>test-jquery-ajax-list</title></head><body><div >  <table>   <thead>   <tr>     <th>id</th>     <th>name</th>     <th>sex</th>     <th>time </th>   </tr>   </thead>   <tbody id="infolist">   </tbody>  </table></div></body><script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script><script type="text/javascript">  $(document).ready(function(){   getList();   function getList(){     // jquery ajax 请求     $.ajax({      type:'post', //请求方式,默认get      url :"http://localhost/ajax-demo-list/test.php",      data:{        getFunction:1      },success:function(data,status){        $('#infolist').html('');        $str = '';        $.each(data.list,function(i,val){         $str = $str + '<tr>';         $str = $str + '<td> '+val.id+' </td>';         $str = $str + '<td> '+val.name+' </td>';         $str = $str + '<td> '+val.sex+' </td>';         $str = $str + '<td> '+val.time+' </td>';         $str = $str + '</tr>';        });        $('#infolist').append($str);        if(data.list == "" || data.list.length < 0 || data.list == "undefined"){         $('#infolist').html('<td colspan="10" >暂无相关数据...</td>');        }      },error:function(data,statsu){        alert("发送请求失败!");      }     });   }  });</script></html>php代码 (test.php)<?phpheader("Content-Type: application/json;charset=utf-8");if($_REQUEST['getFunction']){  getList();}function getList(){  $data = array(   array(     'id'  => 1,     'name' => 'xiaoming',     'sex' => '男',     'time' => '2016年1月22日 14:45:46'   ),   array(     'id'  => 2,     'name' => '老张',     'sex' => '男',     'time' => '2016年1月22日 14:45:46'   ),   array(     'id'  => 3,     'name' => '捞王',     'sex' => '男',     'time' => '2016年1月22日 14:45:46'   )  );  $list = json_encode(array('list'=>$data));  print_r($list);  //  print_r(json_encode(array('list'=>$data=array())));}