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动态调用css属性的小规律及实例说明
Dec 28 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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/09/30 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript 闭包详解
2015/07/02 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
Python入门篇之列表和元组
2014/10/17 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
一套带网友答案的.NET笔试题
2016/12/06 面试题
行政前台岗位职责
2013/12/04 职场文书
毕业论文评语大全
2014/04/29 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
公司周年庆典标语
2014/10/07 职场文书
警示教育片观后感
2015/06/17 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL