继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

Lay0305
关注TA
已关注
手记 4
粉丝 16
获赞 193

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 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"  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())));
}
打开App,阅读手记
15人推荐
发表评论
随时随地看视频慕课网APP

热门评论

希望博主能多分享点web页面调用php方法的例子,毕竟前端也是要了解后台的实现过程的,前端会用ajax调用数据正是我工作的下一个学习目标呢

感觉非常不错,值得推荐!

查看全部评论