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获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue组件与复用详解
Apr 08 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js图片预加载示例
2014/04/30 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
Python实现对象转换为xml的方法示例
2017/06/08 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python实现EM算法实例代码
2020/10/04 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
python中操作文件的模块的方法总结
2021/02/04 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
初任培训自我鉴定
2013/10/07 职场文书
优秀党员获奖感言
2014/02/18 职场文书
村道德模范事迹材料
2014/08/28 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
报名委托书
2015/01/29 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书