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; }