json数据生成、传输、解析、展现

在WEB-INF/lib下放入json-lib-2.3-jdk15.jar，这个包依赖如下包，也需放入commons-logging-1.1.1.jar、commons-lang-2.5.jar、ezmorph-1.0.6.jar、commons-beanutils-1.8.3.jar、xom-1.2.6.jar、httpclient-4.0.3.jar

服务器端代码：

// 构建json数据List<RecordAndItem> recordAndItems = new ArrayList<RecordAndItem>();for (int i = 0; i < records.size(); i++) {Record recordNow = records.get(i);recordAndItems.add(new RecordAndItem(recordNow.getId(), recordNow.getUserId(), recordNow.getAmount(),recordNow.getDate().toString(), recordNow.getRemarks(), itemMap.get(recordNow.getItemId()).getDescription()));}JSONArray jsonArray = JSONArray.fromObject(recordAndItems);out.print(jsonArray);

客户端js代码：

function div_show_hide(id) {if (id == "addRecordDivClose")document.getElementById("addRecordDiv").style.display = "none";if (id == "addRecordDivOpen")document.getElementById("addRecordDiv").style.display = "block";}function init() {var bodyWidth = document.body.clientWidth;var bodyHeight = document.body.clientHeight;// alert(bodyWidth+"##"+bodyHeight);document.getElementById("addRecordDiv").style.left = (bodyWidth - 320) / 2+ "px";document.getElementById("addRecordDiv").style.top = (bodyHeight - 200) / 2+ "px";}function addRecord() {/* * var dateInputNode = document.getElementById("date"); var itemIdInputNode = * document.getElementById("itemId"); var amountInputNode = * document.getElementById("amount"); var remarksInputNode = * document.getElementById("remarks"); var date = * dateInputNode.getAttribute("value"); var itemId = * itemIdInputNode.getAttribute("value"); var amount = * amountInputNode.getAttribute("value"); var remarks = * remarksInputNode.getAttribute("value"); */var dateInputNode = $("#date");var itemIdInputNode = $("#itemId");var amountInputNode = $("#amount");var remarksInputNode = $("#remarks");var date = dateInputNode.val();var itemId = itemIdInputNode.val();var amount = amountInputNode.val();var remarks = remarksInputNode.val();// 解决中文乱码问题// date = encodeURI(encodeURI(date));// itemId = encodeURI(encodeURI(itemId));// amount = encodeURI(encodeURI(amount));remarks = encodeURI(encodeURI(remarks));//alert(date + " " + itemId + " " + amount + " " + remarks);addRecordDo(date, itemId, amount, remarks);// setInterval(addRecordDo, 5000);}function jsonOperation(data) {//alert(data);// alert("addRecord");/* * if (data == "ok") { // alert("addRecord success"); var * showRecordsTableBodyObject = $("#showRecordsTableBody"); } */var tabelHtml = "";$.each(data, function(i) {//alert(data[i].itemDesc);var inum = i + 1;if (i % 2 == 0) {tabelHtml += "<tr bgcolor=/"#CCCCFE/" ><td>" + inum+ "</td><td>" + data[i].date + "</td><td>"+ data[i].itemDesc + "</td><td>" + data[i].amount+ "</td><td>" + data[i].remarks + "</td></tr>";} else {tabelHtml += "<tr bgcolor=/"#88EF88/" ><td>" + inum+ "</td><td>" + data[i].date + "</td><td>"+ data[i].itemDesc + "</td><td>" + data[i].amount+ "</td><td>" + data[i].remarks + "</td></tr>";}});//alert(tabelHtml);$("#showRecordsTableBody").html(tabelHtml);}function addRecordDo(date, itemId, amount, remarks) {$.getJSON("user/addRecord?date=" + date + "&itemId=" + itemId + "&amount="+ amount + "&remarks=" + remarks, null, function(data){alert("添加成功");div_show_hide("addRecordDivClose");jsonOperation(data);$.get(convertUrl("user/getRecordNum"), null, function(data){$("#recordNum").html(data);});$.get(convertUrl("user/getPageNumSum"), null, function(data){$("#pageSumNum").html(data);});});}function page(id) {/*var pageNum;$.get("user/getPageNum", null, function(data){pageNum = data;alert("doGetPageNum");alert(pageNum);});alert(pageNum);*/if("previousPage" == id){if($("#pageNum").html()=="1"){alert("已经是首页，不能再前进了");}else{$.getJSON(convertUrl("user/page?type=previousPage"), null, function(data){jsonOperation(data);$.get(convertUrl("user/getPageNum"), null, function(data){$("#pageNum").html(data);});});}}if("nextPage"==id){if($("#pageNum").html()==$("#pageSumNum").html()){alert("已经是尾页，不能再后退了");}else{$.getJSON(convertUrl("user/page?type=nextPage"), null, function(data){jsonOperation(data);$.get(convertUrl("user/getPageNum"), null, function(data){$("#pageNum").html(data);});});}}}//加上时间戳function convertUrl(url) {var timestamp = (new Date()).valueOf();if (url.indexOf("?") >= 0) {url = url + "&t=" + timestamp;} else {url = url + "?t=" + timestamp;}return url;}