jQuery通过ajax请求php遍历json数组到table中的代码(推荐)


Posted in Javascript onJune 12, 2016

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中的代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 #Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 #Javascript
JS中常用的输出方式(五种)
Jun 12 #Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 #Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 #Javascript
深入解析JavaScript中的arguments对象
Jun 12 #Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 #Javascript
You might like
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
财务工作失误检讨书
2015/02/19 职场文书
保安辞职信范文
2015/02/28 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
现役军人家属慰问信
2015/03/24 职场文书
看上去很美观后感
2015/06/10 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书