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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP二维数组去重算法
2016/12/17 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python实现将元祖转换成数组的方法
2015/05/04 Python
Python解析最简单的验证码
2016/01/07 Python
Python网络编程详解
2017/10/31 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python中pyplot基础图标函数整理
2020/11/10 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
校园活动宣传方案
2014/03/28 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
人事任命通知
2015/04/20 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript