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裏。