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. iOS开发——动画篇Swift篇&炫酷弹出菜单

    炫酷弹出菜单   这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu ...

  2. day06 Java基础

    1.二维数组格式一(列固定):数据类型[][] 变量名=new 数据类型[m][n]; 二维数组格式二(列变化):数据类型[][] 变量名=new 数据类型[m][]; 二维数组格式三:数据类型[][ ...

  3. FTP服务器简易有效的访问方法

    访问FTP服务器传统的方法是使用专用的客户端程序,如CuteFTP,8UFTP等,也包括命令行的FTP客户端c:\windows\system32\ftp.exe程序. FTP服务器也有简易访问方法 ...

  4. 【双十一到了，准备买书了么？】推荐几本c/c++入手的书籍

    <C和指针>c语言的经典之作,全书共18章,覆盖了数据.语句.操作符和表达式.指针.函数.数组.字符串.结构和联合等几乎所有重要的C编程话题.而且每章后面都有基础回顾已经较多例程,很适合入 ...

  5. Android（java）学习笔记117：英文朗诵android App编写实例

    1.首先,我先把代码放到下面: package com.himi.speaker; import java.util.Locale; import android.app.Activity; impo ...

  6. MAC下查看端口占用并杀死进程

    Eclipse在Run on Server时,Tomcat是开启的,但是报错,显示8080.8005和8009端口被占用 终端输入 查看所有开启的端口 sudo lsof -i -P | grep - ...

  7. javaweb学习总结十四(xml约束之Schema)

    一:schema约束简单介绍 1:xml Schema的定义以及优缺点 2:xml schema入门 3:命名空间 这里http://www.itcast.cn 并没有什么具体的意义,只是命名而已. ...

  8. 把数据库中的字符串格式转为long类型

    背景: 在做接口时,需要把数据库中所有ID取出来,用jmter做一些数据关联,问题来了,数据库中的ID转换出来为字符型,而接口是需要使用LONG型,所以在导出来后,数据一直报类型不为long,那如何把 ...

  9. document.ready和onload的区别

    转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...

  10. asp.net上传文件时出现 404 - 找不到文件或目录。

    昨天客户网站反应上传较大文件时出现404-找不到文件或目录的错误.如图: 网站上给出的提示是上传文件不能超过50M,但是在38M和40M这样的文件都不能上传了,显然不对. 在网上查了很久,第一个是检查 ...