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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
移动节点的jquery代码
Jan 13 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JavaScript静态的动态
2006/09/18 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
js定时器实例分享
2016/12/20 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python使用正则表达式提取网页URL的方法
2015/05/26 Python
八大排序算法的Python实现
2021/01/28 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
高中生自我鉴定范文
2013/10/30 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
信息部岗位职责
2013/11/12 职场文书
婚纱店策划方案
2014/05/22 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
万能检讨书
2015/01/27 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
2015年科室工作总结
2015/04/10 职场文书
北京青年观后感
2015/06/15 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书