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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
js判断密码强度的方法
Mar 18 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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在Web开发领域的优势
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php获取系统变量方法小结
2015/05/29 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
mongodb和php的用法详解
2019/03/25 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
js自带函数备忘 数组
2006/12/29 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
js实现索引图片切换效果
2015/11/21 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python autoescape标签用法解析
2020/01/17 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
工程业务员岗位职责
2013/12/31 职场文书
思想品德自我评价
2014/02/04 职场文书
个人租房协议书
2014/11/28 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
MySQL数据库表约束讲解
2022/06/21 MySQL