关于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); 方法将得到的数据输出到页面相对应的标签中，就可以实现将数据展示在前端页面上了。
解析数据后得到的一级分类信息：
选中一级分类下的所对应的二级分类：
一级分类下的二级分类下的所对应的所有标签：
