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"> <head> < ...

  2. Jquery通过ajax请求NodeJS返回json数据

    最近看了NodeJS相关的,在网上查了下结合AJAX的应用,感觉应用前景还是不错的.为什么用这个组合呢? 1.NodeJS不需要安装,拷贝过去就可以使用,而环境变量可以只配置在当前cmd窗口,运行方便 ...

  3. Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）

    1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...

  4. Servlet处理（jQuery）Ajax请求

    1. jQuery     jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...

  5. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

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

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

  7. Angular和jQuery的ajax请求的差别

    近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  8. dTree无限级文件夹树和JQuery同步Ajax请求

    曾经都是用JQuery对树的支持来实现文件夹树的,近来闲来无事就弄了下dTree,感觉其无限级文件夹还是挺好的,并且它的使用也比較方便,基本上就是先把要用的js文件即dtree.js和css文件dtr ...

  9. Struts2处理（jQuery）Ajax请求

    1. Ajax     Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...

随机推荐

  1. PHP 数组反转（值有重复）

    public function indexssss() { $a=[ 'Input.txt' => 'Randy', 'Code.py' => 'Stan', 'Output.txt' = ...

  2. niagara Workbench module import IntelliJ

    1. 在整个网络布线中使用一种布线方式,但是两端都有RJ-45 plug  的网络连线,无论是采用方式A还是方式B 端接的方式都是试用的.网络都是通用的,双绞线的顺序与RJ-45偶的引脚序号一一对应, ...

  3. sass进阶—变量运算

    /*变量操作 (两个变量之间的运算符需要用空格隔开,否则会报错.)==,!= <,>,<=,>=+,-,*,/,% */ $width1:50px;$width2:100px; ...

  4. Mapjoin和Reducejoin案例

    一.Mapjoin案例 1.需求:有两个文件,分别是订单表.商品表, 订单表有三个属性分别为订单时间.商品id.订单id(表示内容量大的表), 商品表有两个属性分别为商品id.商品名称(表示内容量小的 ...

  5. C语言面对对象设计模式汇编

    面向对象发展到今天,已经出现了许许多多优秀的实践.方法和技术.很多的技术都能够有效的提高软件质量.IBM上的<面向对象软件开发和过程>系列文章对面对对象设计从如下层面进行了详细的介绍:代码 ...

  6. Python3的桌面程序开发利器：Eric6的环境搭建、使用

    本文旨在通过一个简单的demo,介绍基于Python3.PyQT5的环境下开发桌面应用程序的一种方案,当然开发Python的桌面应用程序不止是PyQT 这一种方案,还可以使用Python自带的Tkin ...

  7. 04-Python入门学习-流程控制

    一.流程控制if 语法1: if 条件:  code1  code2  code3  .... age=180 height=163 weight=75 sex='female' is_beautif ...

  8. python traceback获取详细的异常信息

       运行结果 : 用try except 会报出报错信息,但是没有具体哪个地方报错,多少行,这样不利于查找报错信息 这时我们就可以使用traceback模块 运行结果:    如上图,报错信息会具体 ...

  9. java+接口自动化+eclipse之-----环境搭建

    根据金字塔的比重总结,UI测试占用10%,接口测试占有20%,单元测试占用70%.考虑到之前学过一段时间的单元测试.UI测试,而接口测试未曾接触过,所以最近打算看看接口测试是怎么实现的. 首先,我们先 ...

  10. Java-IO流之输入输出流基础示例

    一.理论: 1.什么是输入输出? 输入输出的对象是数据,数据的存储区域是磁盘或者光盘等设备,我们知道还有一个存储数据的空间----内存,其中磁盘的速度比较慢,内存的速度比较快,把数据读入内存的动作称作 ...