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())));

}

　　

jQuery ajax 请求php遍历json数组到table中的更多相关文章

  1. jQuery通过ajax请求php遍历json数组到table中的代码

    html代码(test.html),js在html底部 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <hea ...

  2. jQuery ajax 传递JSON数组到Spring Controller

    jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...

  3. JQuery ajax请求struts action实现异步刷新的小实例

    这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换, ...

  4. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  5. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  6. 原生js，jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  7. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  8. 二、jQuery Ajax请求

    一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...

  9. jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

随机推荐

  1. 工作vs.学�

    近一两年来,我先后对［工作与学习］的复杂过程有过多次的头脑风暴,而且感觉在这方面略有所成(看这里和这里):当然既然仅仅是头脑风暴,所谓的所成也仅仅是一些粗糙的想法,一些没有实证过的如果,算是积累而已, ...

  2. PHP获取用户真实 IP , 淘宝IP接口获得ip地理位置(转)

    <?php /** * 获取用户真实 IP */ function getIP() { static $realip; if (isset($_SERVER)){ if (isset($_SER ...

  3. ABAP OO的八大理由

    原贴地址:http://scnblogs.techweb.com.cn/abaplv/archives/127.html 几年前SAP BASIS 4.6为ABAP扩展了OO功能,这是很多传统的ABA ...

  4. Keeplived 详解

    http://www.cnblogs.com/pricks/p/3822232.html

  5. 网络IPC：套接字

    网络进程间通信(network IPC):不同计算机(通过网络相连)上运行的进程相互通信的机制. 套接字网络IPC接口:进程能够使用该接口和其他进程通信.通过该接口,其他进程运行位置是透明的,它们可以 ...

  6. AngularJS - Apply方法监听model变化

    <body> <div ng-app="myApp"> <div ng-controller="firstController" ...

  7. css笔记05：表单

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. android 基础项目及开发出现：error opening trace file: No such file or directory错误解决

    本身这个错误不影响运行,但是看着烦啊.解决方案几种如下: 1.xml标签不完整或者未关闭,常有的事.Eclipse并不是所有的xml标记都检查,单双标记什么的. 2.有人说,据说是 android a ...

  9. ios webview点击图片看大图效果及相应手势操作

    下面参考资料有比较详细的解释,在之前的就项目中也有比较好的效果(支持更多手势),可以参考下 参考资料

  10. CSS3 box-flex属性和box-orient属性

    比较有意思的是虽然目前没有浏览器支持box-flex,box-orient属性,但CSS3问世以来,这两个属性却一直很火.2014年阿里校招第5题要求使用CSS3中的功能实现三个矩形的布局,总的宽度为 ...