问题描述
最近在重新学习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里。