这两天学的东西有点多,今天抽个时间写下来,以此作为激励,这两天学了json,ajax,jQuery
一、使用第三方的工具java转换为json类型
首先就是java类型转换为json对象,首先要导入第三方工具包:
准备导入第三方jar包:
》commons-beanutils-1.7.0.jar
》commons-collections-3.1.jar
》commons-lang-2.5.jar
》commons-logging-1.1.1.jar
》ezmorph-1.0.3.jar
》json-lib-2.1-jdk15.jar
转换的方法如下:
(1)JavaBean----->JSON
》JSONArray jsonArray = JSONArray.fromObject(city);
》String jsonJAVA = jsonArray.toString();
(2)List<JavaBean>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(cityList);
》String jsonJAVA = jsonArray.toString();
(3)List<String>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(stringList);
》String jsonJAVA = jsonArray.toString();
(4)Set<JavaBean>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(citySet);
》String jsonJAVA = jsonArray.toString();
(5)Map<String,Object>----->JSON
》JSONArray jsonArray = JSONArray.fromObject(map);
》String jsonJAVA = jsonArray.toString();
public static void javabean2Json() { City city = new City(1,"广州"); JSONArray jsonArray = JSONArray.fromObject(city); String jsonJAVA = jsonArray.toString(); System.out.println(jsonJAVA); //[{"id":1,"name":"广州"}] } public static void list2json() { List<City> cityList = new ArrayList<City>(); cityList.add(new City(1,"广州")); cityList.add(new City(2,"深圳")); Province province = new Province(1,"广东",cityList); //[{"id":1,"cityList":[{"id":1,"name":"广州"},{"id":2,"name":"深圳"}],"name":"广东"}] JSONArray jsonArray = JSONArray.fromObject(province); String jsonJAVA = jsonArray.toString(); System.out.println(jsonJAVA); //List集合[{"id":1,"name":"广州"},{"id":2,"name":"深圳"}] } public static void set2json() { Set<City> citySet= new HashSet<City>(); citySet.add(new City(1,"广州")); citySet.add(new City(2,"深圳")); JSONArray jsonArray = JSONArray.fromObject(citySet); String jsonJAVA = jsonArray.toString(); System.out.println(jsonJAVA); //[{"id":1,"name":"广州"},{"id":2,"name":"深圳"}] } public static void map2json() { List<City> cityList = new ArrayList<City>(); cityList.add(new City(1,"广州")); cityList.add(new City(2,"深圳")); Map<String,Object> map = new HashMap<String,Object>(); map.put("total", cityList.size());//表示集合的长度 map.put("rows", cityList);//表示集合 /** * [{"total":2,"rows":[{"id":1,"name":"广州"},{"id":2,"name":"深圳"}]}] */ JSONArray jsonArray = JSONArray.fromObject(map); String jsonJAVA = jsonArray.toString(); jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1); System.out.println(jsonJAVA); //[{"id":1,"name":"广州"},{"id":2,"name":"深圳"}] } public static void main(String[] args) { // TODO Auto-generated method stub // javabean2Json(); // list2json(); // set2json(); map2json(); }
注意的是这里json全是java格式,必须转换为javascript所支持的json格式.
注意:JS可以直接解析JSON格式的文本,前提是:该JSON必须采用JS格式书写的才行,如果该JSON是采用Java格式写的,必须使用eval()函数转换后,方可被JS解析,该eval("")函数接收一个字符串格式的内容。
二 、使用struts2自动将java对象转换为json
1)导入struts2的jar包,主要是一些核心包,
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
commons-lang3-3.1.jar
freemarker-2.3.19.jar
javassist-3.11.0.GA.jar
ognl-3.0.5.jar
struts2-core-2.3.4.1.jar
xwork-core-2.3.4.1.jar
还有一个struts2对json支持的插件包:struts2-json-plugin-2.3.1.1.jar
2)配置web.xml
<!-- 配置拦截器 --> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
配置struts.xml文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!-- 配置struts2 --> <!--<package name="checknode" extends="struts-default" namespace="/user"> <action name="check" class="cn.itcast.js_02.checkcode.CheckcodeAction" method="check"> </action> </package>--> <package name="province" extends="json-default" namespace="/"> <!-- 配置全局结果 --> <global-results> <result name="success" type="json"></result> </global-results> <action name="findCityByProvince" class="cn.itcast.js_02.provincecityarea.ProvinceCityArea" method="findCityByProvince"> </action> <action name="findAreaByCity" class="cn.itcast.js_02.provincecityarea.ProvinceCityArea" method="findAreaByCity"> </action> </package> </struts>
3)javabean 代码:
package cn.itcast.js_02.provincecityarea; public class Bean { private String province; private String city; public Bean() { // TODO Auto-generated constructor stub } public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } }
Action代码:
package cn.itcast.js_02.provincecityarea; import java.util.ArrayList; import java.util.List; import com.opensymphony.xwork2.ActionSupport; public class ProvinceCityArea extends ActionSupport { private Bean bean; public void setBean(Bean bean) { this.bean = bean; } public Bean getBean() { return bean; } public String findCityByProvince() throws Exception { // TODO Auto-generated method stub cityList = new ArrayList<String>(); if("湖北".equals(bean.getProvince())) { cityList.add("武汉"); cityList.add("孝感"); cityList.add("黄冈"); }else if("湖南".equals(bean.getProvince())) { cityList.add("长沙"); cityList.add("株洲"); cityList.add("岳阳"); cityList.add("湖南"); }else if("江西".equals(bean.getProvince())) { cityList.add("南昌"); cityList.add("南昌"); cityList.add("南昌"); cityList.add("南昌"); } //配置让struts2自动将List/Set/Map<String>转换为JSON文本 return this.SUCCESS; } /** * 通过城市查找区域 * @return * @throws Exception */ public String findAreaByCity() throws Exception { // TODO Auto-generated method stub areaList = new ArrayList<String>(); if("武汉".equals(bean.getCity())) { areaList.add("AA"); areaList.add("BB"); areaList.add("CC"); }else if("南昌".equals(bean.getCity())) { areaList.add("DD"); areaList.add("EE"); areaList.add("FF"); }else if("长沙".equals(bean.getCity())) { areaList.add("GG"); areaList.add("HH"); areaList.add("II"); } //配置让struts2自动将List/Set/Map<String>转换为JSON文本 return this.SUCCESS; } private List<String> cityList; private List<String> areaList; public List<String> getAreaList() { return areaList; } public List<String> getCityList() { return this.cityList; } }
jsp代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>struts2实现三级联查询</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <select id="provinceID" style="width:111px"> <option>请选择省份</option> <option>湖北</option> <option>湖南</option> <option>江西</option> </select> <select id="cityID" style="width:111px"> <option>请选择城市</option> </select> <select id="areaID" style="width:111px"> <option>请选择区域</option> </select> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript"> document.getElementById("provinceID").onchange = function() { var province = this[this.selectedIndex].innerHTML; //清除之前的样式 var cityElement = document.getElementById("cityID"); cityElement.options.length = 1; //当省份发生变化时,区域也会发生变化 var areaElement = document.getElementById("areaID"); areaElement.options.length = 1; if("选择省份"!=province) { //NO1) var ajax = createAjax(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(); ajax.open(method, url); //NO3) ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //NO4) var content = "bean.province="+province; ajax.send(content); //------------------------->等待 //NO5) ajax.onreadystatechange = function() { if(ajax.readyState == 4) { if(ajax.status == 200) { //NO6)返回JAVA var jsonJAVA = ajax.responseText; var p = eval("("+jsonJAVA+")"); var array = p.cityList; var size = array.length; for(var i=0;i<size;i++) { var city=array[i]; var option = document.createElement("option"); option.innerHTML = city; cityElement.appendChild(option); } } } } } } document.getElementById("cityID").onchange = function() { var city = this[this.selectedIndex].innerHTML; //清除之前的数据 var areaElement = document.getElementById("areaID"); areaElement.options.length = 1; if("请选择城市"!=city) { //NO1) var ajax = createAjax(); //MO2) var method = "POST"; var url = "${pageContext.request.contextPath}/findAreaByCity?time="+new Date().getTime(); ajax.open(method,url); //NO3) ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //NO4) var content = "bean.city="+city; ajax.send(content); //----------------------等待 ajax.onreadystatechange = function() { //NO5) if(ajax.readyState == 4) { if(ajax.status == 200) { //NO6) var jsonJAVA = ajax.responseText; var jsonJS = eval("("+jsonJAVA+")"); var array = jsonJS.areaList; var size = array.length; for(var i=0;i<size;i++) { var area = array[i]; var option = document.createElement("option"); option.innerHTML = area; areaElement.appendChild(option); } } } } } } </script> </body> <form action="" enctype="application/x-www-form-urlencoded"></form> </html>在这中间出了一些问题,大部分是因为写错了方法名称或属性名例如:ajax.onreadystatechange最后再附上源码地址:https://github.com/blench/js_day02.git