文档章节

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

Ethel_oo
 Ethel_oo
发布于 04/20 21:44
字数 526
阅读 410
收藏 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对象很简单只需通过 $ 对象即可 $(selector, [context])...

369yun
2016/03/24
323
0
jQuery类库新手使用指南之AJAX方法 - 第一部分

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

gbin1
2012/03/12
0
0
实现文件下载请等待提示

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

101ttyy
2016/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day63-20180821-流利阅读笔记-待学习

性别歧视在日本:“我是女生,所以社会不让我学医” 毛西 2018-08-21 1.今日导读 大家在看病的时候,有留意过女医生的比例吗?在性别歧视现象十分严重的日本,男医生和女医生的比例达到了惊人...

aibinxiao
41分钟前
2
0
Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
4
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
1
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
1
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部