關於json封裝與前臺解析（商城標籤的封裝與前端解析展示資訊）
阿新 • • 發佈：2018-12-10
關於json封裝與前臺解析
本文以自己寫的商城專案一個小模組為例，servlet裡通過呼叫相應的方法得到一個list集合的商品物件，通過一定的規則封裝json，然後傳送到前臺頁面，前臺頁面經過解析json資料，遍歷資料將資料資訊展示在前端介面中。
通過前端傳來的相應的資料，後臺得到資料，查詢出相應商品所對應的一級分類和二級分類資訊，把一級分類資訊和二級分類資訊封裝到json中供前端解析。
/** * 查詢所有一級分類以及一級分類下的二級分類 */ public String queryAll(HttpServletRequest request, HttpServletResponse response) throws Exception { PrintWriter out = response.getWriter(); // 從資料庫查詢所有商品分類 List<Gclass> list = service.queryAll(); // 沒有查詢到資料 if (list == null || list.size() <= 0) { JsonObject jo = new JsonObject(); jo.addProperty("result", 0); jo.addProperty("data", "null"); out.print(jo.toString()); return null; } // 封裝json資料 JsonObject obj = new JsonObject();// 全域性Json物件 JsonArray data = new JsonArray();// 封裝data元素的value值，陣列型別 // 遍歷結果集 for (Gclass gc : list) { JsonObject oneObj = new JsonObject();// 一級分類物件 JsonArray sonData = new JsonArray();// 二級分類陣列 // 封裝一級分類 if (gc.getPid() == 0) { oneObj.addProperty("gid", gc.getGid()); oneObj.addProperty("name", gc.getName()); oneObj.addProperty("pid", gc.getPid()); // 對二級分類陣列賦值 for (Gclass sonGc : list) { // 封裝二級分類物件 if (sonGc.getPid() == gc.getGid()) { JsonObject sonObj = new JsonObject(); sonObj.addProperty("gid", sonGc.getGid()); sonObj.addProperty("name", sonGc.getName()); sonObj.addProperty("pid", sonGc.getPid()); sonObj.addProperty("sx", sonGc.getSx()); //封裝標籤 JsonArray tagArr = new JsonArray(); int gid = sonGc.getGid(); List<Tag> tagList = new TagServiceImpl().queryByGid(gid); for (Tag tag : tagList) { JsonObject tagObj = new JsonObject(); tagObj.addProperty("id", tag.getId()); tagObj.addProperty("tagName", tag.getTagName()); tagObj.addProperty("tj", tag.getTj()); tagArr.add(tagObj); } sonObj.add("tag", tagArr); // 把二級分類物件新增到二級分類陣列中 sonData.add(sonObj); } } oneObj.addProperty("sx", gc.getSx()); oneObj.add("sonData", sonData);// 新增二級分類陣列物件到一級分類中 // 新增一級分類物件到一級分類陣列中 data.add(oneObj); } } // 封裝全域性json物件 obj.addProperty("result", 1); obj.add("data", data); // 向客戶端響應 out.print(obj.toString()); return null; }
在前端解析json資料。（通過ajax非同步提交的方式載入json資料資訊）
首先得到全域性的json資料物件，然後得到一級分類資訊，：
$(function(){ $.ajax({ type:'GET', url:'gclass', dataType:'json', data:'m=queryAll', async:false, success:function(data){ var obj = data;;//全域性json物件 if(obj.result == 1){ var data = obj.data; jsonObj = obj; var htmlStr = "<option value='0'>請選擇</option>"; for ( var int = 0; int < data.length; int++) { var oneObj = data[int];//一級分類物件 htmlStr += "<option id='"+oneObj.gid+"' value='"+oneObj.gid+"'>"+oneObj.name+"</option>"; } $("#oneGid").html(htmlStr); } } }); });
通過遍歷一級分類資訊得到相對應的二級分類物件資訊：
//一級分類選擇事件:得到二級分類 function selectOne(obj){ var ops = obj.getElementsByTagName("option"); for(var i=0;i<ops.length;i++){ var op = ops[i]; if(op.selected == true){ var gid = op.id; //查詢二級分類 var dataArr = jsonObj.data; var htmlStr = "<option value='0'>請選擇</option>"; for(var j=0;j<dataArr.length;j++){ var oneObj = dataArr[j];//得到一級分類物件 if(oneObj.gid == gid){ var sonArr = oneObj.sonData; for(var k=0;k<sonArr.length;k++){ var sonObj = sonArr[k]; htmlStr += "<option id='"+sonObj.gid+"' value='"+sonObj.gid+"'>"+sonObj.name+"</option>"; } } } $("#twoGid").html(htmlStr); } } }
通過一級分類資訊和二級分類資訊遍歷標籤列表，得到一級分類下的二級分類的相對應的所有標籤資訊：
//二級分類的選擇事件（得到相應的所有標籤）
function selectTwo(obj){
var ops = obj.getElementsByTagName("option");
var htmlStr = "<option value='0'>請選擇</option>";
for(var i=0;i<ops.length;i++){
var op = ops[i];
if(op.selected == true){
var twogid = op.id;//二級分類的gid
var dataArr = jsonObj.data;//得到一級分類的物件陣列
for(var j=0;j<dataArr.length;j++){
var oneObj = dataArr[j];//得到一級物件
var sonArr = oneObj.sonData;//得到二級分類的陣列
for(var k=0;k<sonArr.length;k++){
var sonObj = sonArr[k];//得到二級分類物件
if(sonObj.gid == twogid){
var tags = sonObj.tag;//得到標籤物件陣列
for(var m=0;m<tags.length;m++){
var tag = tags[m];
htmlStr += "<option id='' value='"+tag.id+"'>"+tag.tagName+"</option>";
}
}
}
}
}
}
$("#tid").html(htmlStr);
} 最後通過$("#tid").html(htmlStr); 方法將得到的資料輸出到頁面相對應的標籤中，就可以實現將資料展示在前端頁面上了。
解析資料後得到的一級分類資訊：
選中一級分類下的所對應的二級分類：
一級分類下的二級分類下的所對應的所有標籤：
