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

问题描述

最近在从新学习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里。