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 相关文章推荐
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
实用函数9
2007/11/08 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
JavaScript面向对象编程
2008/03/02 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
JavaScript中的几种继承方法示例
2020/12/06 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
python调用新浪微博API项目实践
2014/07/28 Python
python基础教程之自定义函数介绍
2014/08/29 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
高中的自我鉴定
2013/12/16 职场文书
亮化工程实施方案
2014/03/17 职场文书
校园之声广播稿
2015/08/18 职场文书
《打电话》教学反思
2016/02/22 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB