如何将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>

效果如图
 
OK

赞 (0)

相关推荐

  • Ajax请求中的异步与同步，需要注意的地方说明

    之前做项目时候,用到一个表格控件,它的数据是异步加载的,我在这个表格绑定数据的函数下面友做了一些业务处理,运行页面的时候,用浏览器在我写业务处理那地方打上断点跟踪,它确实执行了,可以最后显示的时候,它的处理被覆盖了,我很纳闷,当时也知道是这个表格绑定函数那出问题了,可是时间紧,它的函数是封装的,没有去具体跟踪,就直接让我的那部分业务处理延迟200ms执行,这样就好了,这是个笨法,不过也是个有效的办法,呵呵. 后来看了下文档,查了些资料,其实原理应该是这样的: 默认设置下,所有请求均为异步请求.如

  • ajax 同步请求和异步请求的差异分析

    ajax同步和异步的差异, 先看2段代码: 代码一: 复制代码 代码如下: Synchronize = function(url,param) { function createXhrObject() { var http; var activeX = [ "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ]; try { http = new XMLHttpRequest;

  • 在实战中可能碰到的几种ajax请求方法详解

    前言 最近在做一个针对单个节点测速的功能页面,测速的逻辑是,测上传速度时,前端传5m数据给server,记录上传和返回数据的时间,测下载速度时,从server下载1m的数据,记录下载和下载成功的时间,上传和下载用的是ajax同步以避免客户端带宽阻塞的问题,并进行3次取平均值.在开发过程过,因为ajax同步异步的问题,走了不少弯路,特地也把之前遇到的业务逻辑整理汇总一下. ajax请求方法如下 一.普通的ajax,async即同步异步处理,success之后,会有data返回值,status请求状

  • Ajax请求在数据量大的时候出现超时的解决方法

    Ajax请求在数据量大的时候出现超时的解决方法

     最近在用EXtjs做项目,在加载数据量特别大的时候会出现加载超时现象,在FB下查看,原来是ext默认ajax请求30秒. 在网上搜到下面的解决方法,以备参考和其他人参考. ExtJS做Ajax请求的时候,默认的相应时间是30秒,如果后来数据查询时间超过30秒,ExtJS就会报错. 这就需要修改ExtJS的超时时间: 2种方法: 1:在Ajax请求的时候加:(timeout: 100000000)属性 复制代码 代码如下: Ext.Ajax.request({ url: 'foo.php', s

  • AJAX跨域请求json数据的实现方法

    我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.

  • 多ajax请求的各类解决方案(同步, 队列, cancel请求)

    •多个ajax请求同时发送,相互无依赖. •多个ajax请求相互依赖,必须有先后顺序. •多个请求被同时发送,只需要最后一个请求. 第1种case 应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序. 处理方案: 直接用jquery的ajax函数.这个用的非常多,这里从略,可看后面的代码中例子. 第2种case 应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果.例如: 用户登录后我们发送一次请求得到用户的应用I

  • ajax请求乱码的解决方法(中文乱码)

    今天遇到一个问题,有关ajax请求中传输中文,遇到乱码的问题. 如下代码: 复制代码 代码如下: function UpdateFolderInfoByCustId(folderId, folderName, custId) {    $.ajax({        type: "Post",        contentType: "application/x-www-form-urlencoded; charset=utf-8",        url: &qu

  • 浅析ajax请求json数据并用js解析(示例分析)

    浅析ajax请求json数据并用js解析(示例分析)

    自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP.jsp等其它web开发模式是一样

  • Ajax请求内嵌套Ajax请求示例代码

    前段时间做项目,需要把全国省市的两个XML文件整合成一个JSON格式的数据,手写的话觉得数据太多了,而且容易出错,于是就想到了用Ajax嵌套的方法来解决,就想平时用Ajax的方法直接嵌套,都会先读出外面Ajax的内容,然后才读取嵌套在Ajax里面的内容,后面经网上查找资料,加个async:false这个Ajax参数就行了,下面是贴代码: <script type="text/javascript"> $(function () { $.ajax({ type: "

  • ajax请求成功后新开窗口window.open()被拦截解决方法

    问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所

随机推荐