zoukankan      html  css  js  c++  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 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())));
    }
    

      

  • 相关阅读:
    【JavaWeb】Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架(前言)
    【CityHunter】游戏流程设计及技术要点
    lua table操作
    python线程池(转)
    windows通过企业内部授权服务器激活方法
    贝叶斯定理(转)
    python 日期计算
    python 过滤 b'及提取 cmd命令返回值
    python 连接MySQL数据库
    python 获取昨天的日期
  • 原文地址:https://www.cnblogs.com/LoveProgram/p/5578076.html
Copyright © 2011-2022 走看看