首页手记 jQuery ajax...

jQuery ajax 请求php遍历json数组到table中

标签：

PHP Html/CSS JQuery

html代码（test.html），js在html底部

输入代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>test-jquery-ajax-list</title>
</head>
<body>
<div class="main">
   <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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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"  style="height:200px;text-align:center;color: #23527c">暂无相关数据...</td>');
               }
            },error:function(data,statsu){
               alert("发送请求失败！");
            }
         });
      }
   });
</script>
</html>

php代码（test.php）

输入代码
<?php
header("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())));
}

点击查看更多内容