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. Android数据的四种存储方式之SQLite数据库

    Test.java: /** * 本例解决的问题: * 核心问题:通过SQLiteOpenHelper类创建数据库对象 * 通过数据库对象对数据库的数据的操作 * 1.sql语句方式操作SQLite数 ...

  2. androisd wifi

    http://blog.csdn.net/yunjinwang/article/details/11968837 http://blog.csdn.net/yunjinwang/article/det ...

  3. CDHtmlDialog加壳HTML5页面跳转错误解决（原）

    HTML5+Native方式开发应用程序,遇到的一个问题:HTML5实现的阅读器在打开文档时,CDHtmldialog类的跳转函数报错,忽略错误程序可以正确执行. 错误代码:OnNavigateCom ...

  4. Debian7.7 wheezy 中源码安装emacs24

    我用的是ARM版本,竟然没有最新的emacs 24,很多第三方插件不能用,果断重新编译个1.追加软件源 deb-src http://ftp.cn.debian.org/debian/ wheezy ...

  5. Windows Service 之 详解（一）

    一.Windows 服务简介 Windows 服务是可以在系统启动时自动打开的(不需要任何人登录计算机)的程序. 1.适合创建Windows 服务的场景: [1] 在没有用户交互操作的情况下运行程序: ...

  6. Code the Tree

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2292   Accepted: 878 Description A tree ...

  7. JDK1.7中调用javascript方法

    import java.io.File; import javax.script.Invocable; import javax.script.ScriptEngine; import javax.s ...

  8. IDL中File_Search函数用法详解(转)

    来自:http://blog.sina.com.cn/s/blog_764b1e9d01014ajp.html 在利用IDL进行批处理时,通常用到file_search函数进行输入路径文件的搜索,现根 ...

  9. javaScript入门--引用类型

    前面提到过,引用类型的值便是对象,在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,而对象则是某个特定引用类型的实例. var a=new Object(); 上面便声明了 ...

  10. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...