文档章节

AJAX请求后台返回map集合的处理方法

Ethel_oo
 Ethel_oo
发布于 04/20 21:44
字数 526
阅读 834
收藏 0

问题描述

最近在重新学习servlet,涉及到后台传集合类给前端的格式化处理方法。目前只写了一个map的例子。使用的是alibaba的json解析库。

需要的架包或maven配置

架包

fastjson-1.1.32.jar:

下载地址:http://http://repo1.maven.org/maven2/com/alibaba/fastjson/

maven配置

<properties>
    <fastjson_version>1.2.28</fastjson_version>
</properties>

<dependencies>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>${fastjson_version}</version>
    </dependency>
</dependencies>

servlet发送map集合给前端

	Map<String, Object> map = new HashMap<>();
	map.put("residueAmount", residueAmount);//这是一个String
	map.put("paymentList", paymentList);//这是一个List<Map<String, Object>>

	//map集合转换为JSON对象
	JSONObject result = JSONObject.parseObject(JSON.toJSONString(map));
	//将JSON对象传递给前端AJAX接收
	resp.getWriter().print(result);

AJAX接收map集合

我的JSP页面源码:

获取String

本月剩余¥:<span id="residueAmount"></span>

获取数据表

    <table class="table table-striped table-bordered bgcolorWhite">
        <thead>
            <tr>
              <th>#</th>
              <th>用途</th>
              <th>金额</th>
              <th>消费日期</th>
            </tr>
        </thead>
        <tbody id="paymentList"></tbody>
      </table>

我的AJAX:源码

	$(document).ready(function() {
    	$.ajax({
    		url: "ListServlet",
    		method: "POST",
    		async: true,
    		success: function (data) {
    		//把JSON字符串转化为JSON对象
                var json = eval("("+data+")");

		//获取String
                $("#residueAmount").text(json.residueAmount);
                
                //获取List<Map<String, Object>>数据列表
                $("#paymentList").empty();
                var result = json.paymentList;
                if(result && result.length != 0) { //不为null,不为NaN,不为undefined
                	$.each(result, function(index, item) {
	                	var lineNumber = ++ index;
	                	var pay_amount = new Number(item.pay_amount).toFixed(2);
	                	var pay_usage = item.pay_usage;
	                	var pay_date = getDateTime(new Date(item.pay_date));
	                	var userid = item.userid;
	                	$("#paymentList").append("<tr><td>" + lineNumber + "</td><td>" + pay_usage + "</td><td>¥" + pay_amount + "</td><td>" + pay_date + "</td></tr>");
				    });
                }else{//当值为空时
                	$("#paymentList").append("<tr><td colspan='4'>暂无数据</td></tr>");
                }
            }
    	});
    });

备注

我这里的数据列表后台返回的pay_date是一个datetime类型,前端不做任何处理的话,就是一个长度13位的数字。因此需要做一个转化,转化的JS处理源码为:

/* 获取日期格式 */
function getDate(date) {
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    return year + "-" + month + "-" + day ; 
}

/* 获取日期时间格式*/
function getDateTime(date) {
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    return year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss; 
}

建议把这种工具类的JS放在自定义的JS文件里,而不是暴露在页面上。比如加在你本地的self-defined.js里。

© 著作权归作者所有

共有 人打赏支持
Ethel_oo
粉丝 4
博文 19
码字总数 9928
作品 0
蚌埠
程序员
私信 提问
Ajax请求中的async:false/true的区别

Ajax请求中的async:false/true的区别 官方的解释是: async Boolean Default: true By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need ......

旺仔520
2014/04/17
0
0
springmvc获取axios数据为null情况

场景:前端用了vue没有用ajax与后台通信,用了axios,但是在代码运行过程中发现axios传递到后台的值接受到数据为null。 问题原因:此处的问题在与axios返回给后台的数据为json类型的,后台接...

王子城
06/19
0
0
前端框架开发指南

Dom是一款专门针对移动端的JS库,集成了大部分常用DOM操作API,你不需要学习任何新的东西,其用法和jQuery几乎是一样的。 创建一个Dom对象很简单只需通过 $ 对象即可 PS. 参数中带有 [ ] 的意...

369yun
2016/03/24
350
0
实现文件下载请等待提示

ajax实现下载等待 该方法先发一个请求到后台去生成Excel,并把生成的Excel文件保存在服务器上的临时文件夹。然后通过ajax返回Excel文件在服务器上的路径或者文件标记。ajax客户端收到服务器返...

101ttyy
2016/12/12
0
0
jQuery类库新手使用指南之AJAX方法 - 第一部分

日期:2012/03/07 来源:GBin1.com 最 近几年很多网站,事实上基本所有的网站都使用一个技术 - AJAX来提供流畅并且高效的用户体验。无论是出名的Google Maps还是Gmail,或者是流行的javascr...

gbin1
2012/03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

flutter Expanded用法

使用的地方:一个分类,类似京东的,左右两边都可以滑动 Widget build(BuildContext context) { return Row(children: [ Column( children: <Widget>[ Ex......

大灰狼wow
12分钟前
1
0
Java8 Map中新增的方法使用总结

前言 得益于 Java 8 的 default 方法特性,Java 8 对 Map 增加了不少实用的默认方法,像 getOrDefault, forEach, replace, replaceAll, putIfAbsent, remove(key, value), computeIfPresent,......

kaixin_code
21分钟前
1
0
@TransactionConfiguration

@TransactionConfiguration过时与替代写法 @TransactionConfiguration 替代写法

miaojiangmin
24分钟前
0
0
浅谈Vue响应式(数组变异方法)

很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法。 看来想让女...

开元中国2015
25分钟前
1
0
Elasticsearch通关教程(五):如何通过SQL查询Elasticsearch

  这篇博文本来是想放在全系列的大概第五、六篇的时候再讲的,毕竟查询是在索引创建、索引文档数据生成和一些基本概念介绍完之后才需要的。当前面的一些知识概念全都讲解完之后再讲解查询是...

SEOwhywhy
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部