html代码（test.html），js在html底部

具体代码如下所示：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>test-jquery-ajax-list</title>
  6.  </head>
  7.  <body>
  8.  <div class="main">
  9.  <table>
  10.  <thead>
  11.  <tr>
  12.  <th>id</th>
  13.  <th>name</th>
  14.  <th>sex</th>
  15.  <th>time </th>
  16.  </tr>
  17.  </thead>
  18.  <tbody id="infolist">
  19.  </tbody>
  20.  </table>
  21.  </div>
  22.  </body>
  23.  <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
  24.  <script type="text/javascript">
  25.  $(document).ready(function(){
  26.  getList();
  27.  function getList(){
  28.  // jquery ajax 请求
  29.  $.ajax({
  30.  type:'post', //请求方式，默认get
  31.  url :"http://localhost/ajax-demo-list/test.php",
  32.  data:{
  33.  getFunction:1
  34.  },success:function(data,status){
  35.  $('#infolist').html('');
  36.  $str = '';
  37.  $.each(data.list,function(i,val){
  38.  $str = $str + '<tr>';
  39.  $str = $str + '<td> '+val.id+' </td>';
  40.  $str = $str + '<td> '+val.name+' </td>';
  41.  $str = $str + '<td> '+val.sex+' </td>';
  42.  $str = $str + '<td> '+val.time+' </td>';
  43.  $str = $str + '</tr>';
  44.  });
  45.  $('#infolist').append($str);
  46.  if(data.list == "" || data.list.length < 0 || data.list == "undefined"){
  47.  $('#infolist').html('<td colspan="10" style="height:200px;text-align:center;color: #23527c">暂无相关数据...</td>');
  48.  }
  49.  },error:function(data,statsu){
  50.  alert("发送请求失败！");
  51.  }
  52.  });
  53.  }
  54.  });
  55.  </script>
  56.  </html>

php代码 （test.php）

  1.  <?php
  2.  header("Content-Type: application/json;charset=utf-8");
  3.  if($_REQUEST['getFunction']){
  4.  getList();
  5.  }
  6.  function getList(){
  7.  $data = array(
  8.  array(
  9.  'id' => 1,
  10.  'name' => 'xiaoming',
  11.  'sex' => '男',
  12.  'time' => '2016年1月22日 14:45:46'
  13.  ),
  14.  array(
  15.  'id' => 2,
  16.  'name' => '老张',
  17.  'sex' => '男',
  18.  'time' => '2016年1月22日 14:45:46'
  19.  ),
  20.  array(
  21.  'id' => 3,
  22.  'name' => '捞王',
  23.  'sex' => '男',
  24.  'time' => '2016年1月22日 14:45:46'
  25.  )
  26.  );
  27.  $list = json_encode(array('list'=>$data));
  28.  print_r($list);
  29.  // print_r(json_encode(array('list'=>$data=array())));
  30.  }

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. 《剑指offer》二叉搜索树和双向链表

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  2. 末学者笔记--Linux计划任务及压缩归档

    一.计划任务 1.介绍: (1)定义:简单说就是通过一些设置,来使linux系统定时执行一些操作与任务. (2)作用:一般可执行一些周期性操作,也可定期备份数据. (3)可使用的命令:常用为at和cr ...

  3. log4j2使用入门（一）

    log4j2是log4j的一个升级版,与log4j1相比进行了很大的改善,同时也修复了一些logback的架构上的问题.所以是目前应用开发的首选的日志器(下载位置:http://apache.faye ...

  4. 查看linux空间大小

    du -sh : 查看当前目录总共占的容量.而不单独列出各子项占用的容量 du -lh --max-depth=1 : 查看当前目录下一级子文件和子目录占用的磁盘容量.

  5. Beta(4/7)

    鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...

  6. 第四篇flask中模板语言 jinja2

    Flask中默认的模板语言是Jinja2 首先我们要在后端定义几个字符串,用于传递到前端 STUDENT = {, 'gender': '中'}, STUDENT_LIST = [ {, 'gende ...

  7. JavaScript中作用域和作用域链的简单理解（变量提升）

    通过阅读<JS高级程序设计>这本书,对js中的作用域和作用域链知识有了初步的了解和认识,准备成笔记供大家参考,笔记中字数比较多,但个人认为叙述的挺详细的,所以希望读者耐心看.再者,本人了解 ...

  8. Android Frameworks的base目录内容分析 “Android Frameworks base”

    Framework文件夹中base目录下文件分类: Android系统结构框架: Android Framework层各文件夹功能分类:

  9. svn打分支和合并操作

    1.svn打分支 到trunk里,选择Branch/tag.... 填写分支版本路径 到branch里svn up 一下,就有1.4.0分支了 2.svn合并 到trunk里,选择Merge.. 选择 ...

  10. [jzoj]3456.【NOIP2013模拟联考3】恭介的法则(rule)

    Link https://jzoj.net/senior/#main/show/3456 Description 终于,在众亲们的奋斗下,最终boss 恭介被关进了库特设计的密室.正当她们松了一口气时 ...