如何将ajax请求返回的Json格式数据循环输出成table形式

更新时间：2013年10月29日 15:11:47 作者：

ajax请求返回Json格式数据，在网上有很多的处理方法，本文教大家如何循环输出成table形式，代码很详细，感兴趣的朋友可以参考下

首先，Ajax请求数据，（用的是Jquery的Ajax）

 
<script> 
$(function(){ 
$('#test').click(function(){ 
$.ajax({ 
url:'__APP__/Article/jsonTest', 
type:'post', 
success:function(data){ 
var item; 
$.each(data,function(i,result){ 
item = "<tr><td>"+result['num']+"</td><td>"+result['title']+"</td><td>"+result['credate']+"</td><td>操作</td></tr>"; 
$('.table').append(item); 
}); 
} 
}) 
}) 
}); 
</script> 

后台处理请求，返回Json格式数据（用的是Thinkphp返回）

复制代码代码如下:

 
$list = $File->group('num')->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select(); 
$this->ajaxReturn($list,'JSON'); 

html部分

复制代码代码如下:

 
<table class="table table-striped table-bordered table-condensed"> 
<tr><th>编号</th><th>名称</th><th>创建时间</th><th>操作</th></tr> 
</table> 

效果如图

您可能感兴趣的文章:

Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）
这篇文章主要介绍了Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET），非常不错，具有参考借鉴价值，需要的朋友参考下
2016-12-12
Ajax 上传图片并预览的简单实现
下面小编就为大家带来一篇Ajax 上传图片并预览的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
Ajax异步检查用户名是否存在
这篇文章主要为大家详细介绍了Ajax异步检查用户名是否存在的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
IE8下Ajax缓存问题及解决办法
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。接下来通过本文给大家介绍IE8下Ajax缓存问题及解决办法，一起看下吧
2016-07-07
Ajax与mysql数据交互制作留言板功能（全）
这篇文章主要为大家详细介绍了Ajax与mysql数据交互，实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
使用ajax跨域调用springboot框架的api传输文件
这篇文章主要介绍了使用ajax跨域调用springboot框架的api传输文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Ajax原理与应用案例快速入门教程
这篇文章主要介绍了Ajax原理与应用案例,结合实例形式分析了ajax原理、功能、创建及使用方法,需要的朋友可以参考下
2019-07-07
原生AJAX写法实例分析
这篇文章主要介绍了原生AJAX写法实例分析,以一个完整的原生Ajax实例分析了Ajax的实现技巧,有助于加深对Ajax的理解,需要的朋友可以参考下
2015-02-02
Axios和Ajax的区别是什么(详细介绍)
ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios,本文对Axios和Ajax的区别是什么给大家讲解的非常详细,需要的朋友一起看看吧
2023-10-10
Ajax请求超时与网络异常处理图文详解
最近在项目中遇到一个问题，当加载数据量特别大的时候会出现加载超时现象，所以这篇文章主要给大家介绍了关于Ajax请求超时与网络异常处理的相关资料,需要的朋友可以参考下
2021-05-05