JSON:JavaScript对象表示法,可以直接在浏览器中通过js建立对象,并为对象设置属性和方法。
建立对象的语法是:{}
设置属性的语法: 属性名:属性值 的形式来加入属性,多个属性之间使用逗号分隔。
设置方法的语法: 方法名:function () {} ,多个之间使用逗号分隔。
var city = { id : 1, title : '南通' , add : function (a,b) { return a + b; } }; |
如果要处理多个对象,可以使用数组,在js中建立数组的语法: []
var allCity = [{ id : 1 , title : '南通' },{ id : 2 , title : '杭州' },{}]; |
但通过java程序后台返回数据时,返回的并不是对象,而是String类型,在js中就要通过eval()方法来转换字符串,变为对象形式:
var str = "{id:1,title:'南通'}" ; var obj = eval("("+str+")"); |
将JSON应用在之前的级联菜单功能中。
后台数据处理改为JSON形式。
public String showplus() throws Exception { List<City> allCities = service.showplus(provinceId);
// 进行JSON字符串的拼接 StringBuilder builder = new StringBuilder(); builder.append("[");
Iterator<City> iter = allCities.iterator(); int index = 0; while (iter.hasNext()) { City c = iter.next(); if (index > 0) { builder.append(","); } builder.append("{"); builder.append("id:" + c.getId()); builder.append(","); builder.append("title:'" + c.getTitle() + "'"); builder.append("}"); index++; }
builder.append("]");
HttpServletResponse response = ServletActionContext.getResponse();
// 设置编码,防止返回的数据出现乱码 response.setCharacterEncoding("UTF-8"); response.setContentType("text/html");
PrintWriter out = response.getWriter(); out.print(builder); out.close();
return null; } |
回调中也直接转换即可使用。
function showplusCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var str = xmlHttp.responseText; // 转换数组 var array = eval("("+str+")");
// 取得城市的下拉列表 var citySelect = document.getElementById("city"); // 先将原有的选项清空 citySelect.length = 1;
// 循环取得id和title for (var i = 0;i < array.length;i++) { var id = array[i].id; var title = array[i].title;
// 使用document对象建立一个元素节点option var option = document.createElement("option"); option.value = id; option.innerHTML = title; // 将option设置为城市下拉列表的子节点 citySelect.appendChild(option); } } } } |
之前的字符串拼写很容易出错,所以开发中一般都使用一些第三方的支持类库,来完成拼写功能,常用的有:org.json,json-lib
public String showplus() throws Exception { List<City> allCities = service.showplus(provinceId);
// 进行JSON字符串的拼接 // StringBuilder builder = new StringBuilder(); // builder.append("["); // // Iterator<City> iter = allCities.iterator(); // int index = 0; // while (iter.hasNext()) { // City c = iter.next(); // if (index > 0) { // builder.append(","); // } // builder.append("{"); // builder.append("id:" + c.getId()); // builder.append(","); // builder.append("title:'" + c.getTitle() + "'"); // builder.append("}"); // index++; // } // // builder.append("]");
// 使用org.json来拼写内容 // 建立一个数组 JSONArray array = new JSONArray(); // 循环建立对象 Iterator<City> iter = allCities.iterator(); while(iter.hasNext()) { City c = iter.next(); JSONObject obj = new JSONObject(); // 为对象设置属性, 类似Map obj.put("id", c.getId()); obj.put("title", c.getTitle()); array.put(obj); }
HttpServletResponse response = ServletActionContext.getResponse();
// 设置编码,防止返回的数据出现乱码 response.setCharacterEncoding("UTF-8"); response.setContentType("text/html");
PrintWriter out = response.getWriter(); System.out.println(array.toString()); out.print(array); out.close();
return null; } |