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>

相关推荐