2019独角兽企业重金招聘Python工程师标准>>>

问题描述

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

需要的架包或maven配置

架包

fastjson-1.1.32.jar：

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

maven配置


    1.2.28



    
        com.alibaba
        fastjson
        ${fastjson_version}

servlet发送map集合给前端

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

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

AJAX接收map集合

我的JSP页面源码：

获取String

本月剩余￥：

获取数据表

我的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>数据列表
                $("#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("" + lineNumber + "" + pay_usage + "￥" + pay_amount + "" + pay_date + "");
				    });
                }else{//当值为空时
                	$("#paymentList").append("暂无数据");
                }
            }
    	});
    });

备注

我这里的数据列表后台返回的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里。

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