复习下json,ajax,地址栏utf-8编码和解码

项目中有用到，正好复习总结下：

JavaScript：

var p = {
			id:1,
			name:"哈哈",
			tel:[
					{
						no:"135",
						type:"中移动"
					},
					{
						no:"133",
						type:"中联通"
					}
				],
			show:function(username){
				alert("你的姓名是:" + p.name+":"+username);
			},
			isSingle:false			
		};

Java：

<span style="white-space:pre">		</span>List<City> cityList = new ArrayList<City>();
<span style="white-space:pre">		</span>cityList.add(new City(1,"中山"));
<span style="white-space:pre">		</span>cityList.add(new City(2,"佛山"));
<span style="white-space:pre">		</span>Province province = new Province(1,"广东",cityList);
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>JSONArray jSONArray = JSONArray.fromObject(province);
<span style="white-space:pre">		</span>String jsonJAVA = jSONArray.toString();
<span style="white-space:pre">		</span>System.out.println(jsonJAVA);
<span style="white-space:pre">		</span>/*
<span style="white-space:pre">		</span>  [
<span style="white-space:pre">			</span> {
<span style="white-space:pre">			</span>  "id":1,
<span style="white-space:pre">			</span>  "name":"广东"
<span style="white-space:pre">			</span>  "cityList":[{"id":1,"name":"中山"},{"id":2,"name":"佛山"}],
<span style="white-space:pre">		</span>     }
<span style="white-space:pre">		</span>  ]
<span style="white-space:pre">		</span>  */

jQuery方式ajax：

 

$.load(url,sendData,function(a,b,ajax){
				var jsonJAVA = ajax.responseText;
				var jsonJS = eval("("+jsonJAVA+")");
				var strTime = jsonJS.strTime;
				$("span:first").html(strTime).css("color","red");
				$("span:last").html(strTime).css("color","blue");
			});

$.ajax({
					"type":"POST",
					"url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(),
					"sendData":{"province":province},
					"success":function(backData,textStatus,ajax){
						//js对象
						var city = backData.cityList;
						//jquery对象
						var $city = $(city);
						//each()
						$city.each(function(){
							//this表示每个城市
							var $option = $("<option>" + this + "</option>");
							$("#city").append( $option );
						});

上面的new Date().getTime()是针对IE浏览器不能重复提交的问题

使用第三方工具，将JavaBean对象/List或Set或Map对象转成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();

以IO流的方式将值输出到AJAX异步对象中

servlet：

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		String username = request.getParameter("username");
		byte[] buf = username.getBytes("ISO8859-1");
		username = new String(buf,"UTF-8");
		System.out.println("username=" + username);
		String tip = "<font color='green'>可以注册</font>";
		if("杰克".equals(username)){
			tip = "<font color='red'>该用户已存在</font>";
		}
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}

action:

public String check() throws Exception {
		//图片路径
		String tip = "images/MsgError.gif";
		//从服务器获取session中的验证码
		String checkcodeServer = (String) ActionContext.getContext().getSession().get("CHECKNUM");
		//将客户端的验证码与服务端的验证码进行比较
		if(checkcode.equals(checkcodeServer)){
			tip = "images/MsgSent.gif";
		}
		//以IO流的方式将tip变量的值输出到AJAX异步对象中
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
		//以下方式不是最好的，但可以完成AJAX异步交互
		return null;
	}

或者

action：

/**
	 * 根据省份查询城市
	 */
	public String findCityByProvinceMethod() throws Exception{
		cityList = new ArrayList<String>();
		if("湖北".equals(province)){
			cityList.add("武汉");
			cityList.add("黄岗");
		}else if("湖南".equals(province)){
			cityList.add("岳阳");
			cityList.add("张家界");
		}else if("广东".equals(province)){
			cityList.add("韶关");
			cityList.add("东莞");
		}
		return "ok";
	}
    /**
	 * 根据城市查询区域
	 */
	public String findAreaByCityMethod() throws Exception{
		areaList = new ArrayList<String>();
		if("武汉".equals(city)){
			areaList.add("AA");
			areaList.add("BB");
		}else if("黄岗".equals(city)){
			areaList.add("CC");
			areaList.add("DD");
		}else if("岳阳".equals(city)){
			areaList.add("EE");
			areaList.add("FF");
		}else if("张家界".equals(city)){
			areaList.add("GG");
			areaList.add("HH");
		}else if("韶关".equals(city)){
			areaList.add("II");
			areaList.add("JJ");
		}else if("东莞".equals(city)){
			areaList.add("KK");
			areaList.add("LL");
		}
		return "ok";
	}
<span style="white-space:pre">	</span>private List<String> cityList;
	private List<String> areaList;
	public List<String> getCityList() {
		return cityList;
	}
	public List<String> getAreaList() {
		return areaList;
	}
       Struts.xml     extends="json-default"
   <package name="provinceCityAreaPackage" extends="json-default" namespace="/">
	   	<action 
			name="findCityByProvinceRequest" 
			class="cn.itcast.javaee.js.provincecityarea.ProvinceCityAreaAction" 
			method="findCityByProvinceMethod">
	   		<result name="ok" type="json">
	   		</result>
	   	</action>
   </package>
       导入：
<span style="white-space:pre">	</span>struts2-json-plugin-2.3.1.1.jar

JSON   结构有两种结构

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。

2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

 为了方便地处理JSON数据，JSON提供了json.js包，下载地址：http://www.json.org/json.js

 

    在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

 

    JSON字符串:

 

    var str1 = '{ "name": "cxh", "sex": "man" }';

 

    JSON对象:

 

    var str2 = { "name": "cxh", "sex": "man" };

 

    一、JSON字符串转换为JSON对象

 

    要运用上面的str1，必须运用下面的要领先转化为JSON对象：

 

    //由JSON字符串转换为JSON对象

 

    var obj = eval('(' + str + ')');

 

或者

 

    var obj = str.parseJSON(); //由JSON字符串转换为JSON对象

 

    或者

 

    var obj = JSON.parse(str); //由JSON字符串转换为JSON对象

 

    然后，就可以这样读取：

 

    Alert(obj.name);

 

    Alert(obj.sex);

 

    特别留心：如果obj本来就是一个JSON对象，那么运用 eval（）函数转换后（哪怕是多次转换）还是JSON对象，但是运用 parseJSON（）函数处理后会有疑问（抛出语法异常）。

 

    二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。

 

    例如：

 

    var last=obj.toJSONString(); //将JSON对象转化为JSON字符

 

    或者

 

    var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

 

    alert(last);

 

    留心：

 

    上面的多个要领中，除了eval()函数是js自带的之外，其他的多个要领都来自json.js包。新版本的 JSON 修改了 API，将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面，前者变成了 Object.toJSONString()，而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领，则说明您的json包版本太低。

地址栏编码和解码的问题：

js:

//对汉字进行UTF-8(U8)的编码
username = encodeURI(username);

java:

//对汉字进行UTF-8的解码

String username = request.getParameter("username");
byte[] buf = username.getBytes("ISO8859-1");
username = new String(buf,"UTF-8");

origialStr=URLEncoder.encode(origialStr,"UTF-8");

origialStr=URLDecoder.decode(origialStr,"utf-8");//感觉和上面的解码没有太大区别？

先到这里，编程尽量不要熬夜哟