`

jquery ajax请求数据,并显示在页面上

 
阅读更多

使用ajax请求获取数据

$.ajax({     
            //要用post方式      
            type: "get",
            //方法所在页面和方法名      
            url: contextPath + '/tjbb/zhtjlist',    
            contentType: "application/json; charset=utf-8",     
            dataType: "json", 
            data:"filters="+angular.toJson(filters)+"",
            success: function(data) {     
               //清空数据     
            $("#listbody").empty();
               //返回的数据用data.rows获取内容
                $.each(data.rows, function(i, item) {
                    $("#listbody").append(
                    		"<tr>"+
                            "<td rowspan='5'>" + item.storeName + "</td>" + 
                            "<td>现金消费</td>"+
                            "<td>" + item.xjjf +"</td>"+
                            "</tr>"+
                            
                            "<tr>"+
                            "<td>储值卡消费</td>"+
                            "<td>" + item.czkxf +"</td>"+
                            "</tr>"+
                            
                            "<tr>"+
                            "<td>交费合计</td>"+
                            "<td>" + item.jfhj +"</td>"+
                            "</tr>"+
                            
                            "<tr>"+
                            "<td>营业金额</td>"+
                            "<td>" + item.yyje +"</td>"+
                            "</tr>"+
                            
                            "<tr>"+
                            "<td>实收现金</td>"+
                            "<td>" + item.ssxj +"</td>"+
                            "</tr>"
                    );
                    
                });
            },
            error: function(err) {     
                alert(err);     
            }

   

对应html代码:
<div class="container">
		<table class="table" id="list">
			<thead>
				<tr>
					<th>店名</th>
					<th>统计项</th>
					<th>金额</th>
				</tr>
			</thead>
			<tbody id="listbody">
			</tbody>
		</table>
	</div>

 

分享到:
评论

相关推荐

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...

    jQuery-ajax-用户名异步请求

    Ajax,即Asynchronous JavaScript and XML,允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,提供更流畅的用户体验。 在“jQuery-ajax-用户名异步请求”这个场景中,我们可能是在设计一个...

    一个完整的jquery+ajax传送请求的实例

    而AJAX(Asynchronous JavaScript and XML)则是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。通过AJAX,我们可以实现页面的无刷新加载,提高用户体验。 在这个实例中,我们将使用jQuery的$...

    jQuery+Ajax+PHP+Mysql实现分页显示数据

    在分页显示数据的过程中,jQuery主要用于处理用户交互,如点击分页按钮,触发Ajax请求。 Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在本例...

    jQuery实现的纯HTML模板进行ajax数据绑定

    在AJAX请求中,服务器通常会返回JSON格式的数据,这些数据可以在JavaScript中直接使用,因为它们的语法与JavaScript对象非常相似。 具体实现步骤可能如下: 1. 创建HTML模板,包含需要动态填充的数据占位符。 2. ...

    SpringMVC框架下使用jQueryAJAX进行数据交互

    5. **解析响应**:在AJAX请求的`success`回调函数中,你可以接收到服务器返回的数据,并根据需要更新DOM,实现无刷新的数据交互。 6. **Ajax_demo项目结构**:在提供的"Ajax_demo"压缩包中,可能包含以下文件和目录...

    Jquery Ajax 前后台数据传输

    在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery库为开发者提供了简单易用的AJAX接口,使得前端与后台的数据交互变得...

    Jquery Ajax分页(有实例)

    - **发送AJAX请求**:使用`$.ajax()`函数,设置URL(指向获取数据的接口)、类型(GET或POST)、数据(如果需要的话,如当前页码、每页显示数量)等参数。 - **处理服务器响应**:成功回调函数中,将返回的数据...

    jQuery实现分页功能(含ajax请求、后台数据、附完整demo)

    - 获取到新数据后,更新页面上的内容显示区域,实现局部刷新效果。 4. **代码执行结果**: - 示例代码展示了如何初始化分页器,其中`pageSize`定义了每页显示多少条数据,`totalPage`定义了总页数。 - 代码中还...

    asp+jquery ajax实例源码,添加,删除,修改,分页

    - 前端通过AJAX请求特定页码的数据,ASP返回对应页的数据,前端动态渲染到页面上。 7. **AJAX与jQuery的结合** - jQuery的$.getJSON()和$.get()、$.post()方法使AJAX请求更易编写,同时提供了一系列便利的事件...

    Struts2+jQuery ajax的一个商品小系统

    5. **Ajax请求**:在前端,使用jQuery的`$.ajax()`或者更高级的`$.post()`、`$.get()`方法发送Ajax请求,例如添加商品时,将商品信息发送到服务器。 6. **JSP页面**:展示商品列表和详细信息,使用Struts2的标签库...

    ajax从后台读json数据,jquery在页面简析

    在本示例中,jQuery将用于发起Ajax请求,接收并解析JSON数据,然后在页面上以表格形式展示这些数据,实现局部刷新。 **Ajax与jQuery结合使用** 1. **创建Ajax请求**:在jQuery中,可以使用`$.ajax()`函数发起一个...

    php+jQuery ajax实现的实时刷新显示数据功能示例

    具体来说,就是通过JavaScript的定时器,每隔一定时间就向服务器发送请求,获取最新的数据,然后在前端页面上实时更新这些数据,以实现数据的实时动态显示。 一、php基础 php是一种广泛使用的开源服务器端脚本语言...

    html静态页JQuery ajax示例demo 源码

    在"静态页ajax示例"中,我们可以看到如何在纯HTML页面上使用jQuery AJAX进行数据交互。这通常包括以下几个步骤: 1. 引入jQuery库:在HTML页面中通过`&lt;script&gt;`标签引入jQuery库,确保AJAX功能可用。 2. 编写AJAX...

    Jquery ajax方式读取txt文件、Jquery分页.

    你可以根据需要对数据进行处理,如显示在网页上。 接下来,我们转向jQuery分页。在网页开发中,分页常用于处理大量数据,让用户可以逐页浏览。jQuery有许多插件可以帮助实现这一功能,比如在给定的标签和压缩包...

    jQuery Ajax请求后台数据并在前台接收

    在后台,比如使用Java Web的Servlet技术,我们可以获取到通过Ajax发送的请求数据,并根据业务逻辑处理后,将结果通过response对象返回给前端。以下是一个处理数据并返回给前端的Servlet代码示例: ```java ...

    Java通过jQuery实现ajax异步请求

    AJAX的主要优势在于提高用户体验,因为用户可以继续在页面上进行其他操作,而不受后台数据交换的影响。 1. **jQuery AJAX API**:在jQuery中,我们通常使用`$.ajax()`函数发起一个AJAX请求。该函数接受一系列参数,...

    基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能

    为了实现动态加载数据,我们需要在Aspx页面中编写逻辑,处理Ajax请求并返回新的数据。通常,这涉及到创建一个WebMethod或使用ASP.NET MVC的控制器方法来接收Ajax请求。 Ajax技术使得网页无需刷新即可获取新数据,...

    jQuery Ajax 登陆和注册页面

    总结,使用jQuery和Ajax,我们可以创建动态、交互性强的登录和注册页面,同时结合自动验证插件,确保数据的有效性,提升用户在填写表单时的体验。通过不断学习和实践,开发者可以进一步优化这些功能,打造出更加高效...

    jQuery Ajax向某个页面传值并取得返回的数组

    服务器端代码完成后,当客户端通过Ajax请求该页面时,服务器会返回一个JSON格式的数组,然后在`success`回调中解析并处理这个数组。 总的来说,jQuery的Ajax功能使得前端和后端之间的数据交互变得简单而高效,特别...

Global site tag (gtag.js) - Google Analytics