jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

 更新时间:2016年06月12日 17:04:12   作者:丶Kevin  
这篇文章主要介绍了jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

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中的代码(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 原创jQuery弹出层插件分享

    原创jQuery弹出层插件分享

    我们在前端开发,经常要用到弹出层的效果,以前很早前就想将这个功能整理成一个公共的接口来实现了;自写的第一个jQuery插件,这里分享给大家,有需要的小伙伴参考下。
    2015-04-04
  • jQuery ajaxForm()的应用

    jQuery ajaxForm()的应用

    Ajax在Web应用中的作用越来越大,这让采用AJAX方式提交一个表单的过程简单的不能再简单了,需要的朋友可以了解一下。
    2016-10-10
  • 用户管理的设计_jquery的ajax实现二级联动效果

    用户管理的设计_jquery的ajax实现二级联动效果

    下面小编就为大家带来一篇用户管理的设计_jquery的ajax实现二级联动效果。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Jquery循环截取字符串的方法(多出的字符串处理成

    Jquery循环截取字符串的方法(多出的字符串处理成"...")

    下面小编就为大家带来一篇Jquery循环截取字符串的方法(多出的字符串处理成"...")。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • jQuery对表单的操作代码集合

    jQuery对表单的操作代码集合

    jQuery对表单的操作代码集合,学习jquery的朋友可以参考下。
    2011-04-04
  • jQuery 中的 DOM 操作

    jQuery 中的 DOM 操作

    在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的.
    2016-04-04
  • 基于jQuery实现的菜单切换效果

    基于jQuery实现的菜单切换效果

    这篇文章主要介绍了基于jQuery实现的菜单切换效果,需要的朋友可以参考下
    2015-10-10
  • jquery实现动态菜单的实例代码

    jquery实现动态菜单的实例代码

    这篇文章主要介绍了jquery实现动态菜单的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jquery实现很酷的网页顶部图标下拉菜单效果

    jquery实现很酷的网页顶部图标下拉菜单效果

    这篇文章主要介绍了jquery实现很酷的网页顶部图标下拉菜单效果,效果非常美观大方,通过鼠标hover事件及页面元素的遍历与样式操作实现该功能,需要的朋友可以参考下
    2015-08-08
  • 使用PHP+JQuery+Ajax分页的实现

    使用PHP+JQuery+Ajax分页的实现

    本篇文章小编将为大家介绍,使用PHP+JQuery+Ajax分页的实现。需要的朋友参考下
    2013-04-04

最新评论