Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持,编码问题
Unit02: JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持
1. 编码问题
(1)发送get请求
为什么会产生乱码?
ie浏览器提供的ajax对象,对中文会使用gbk来编码,非ie浏览器 会使用utf-8来编码。服务器端默认会使用"iso-8859-1"来解码, 所以会产生乱码。
如何解决?
step1. 在服务器端,统一使用"utf-8"来解码。
<Connector URIEncoding="utf-8"/>
step2. 浏览器端,使用encodeURI对中文进行编码。
注: encodeURI函数会使用utf-8来编码。
(2)发送post请求
为什么会产生乱码?
浏览器所提供的ajax对象都会使用utf-8对中文进行编码。 而服务器端会使用iso-8859-1来解码。
如何解决?
request.setCharacterEncoding("utf-8");
2. JSON (Javascript Object Notation)
(1)JSON是什么?
是一种轻量级的数据交换格式。
什么是数据交换?
将数据转换成一种与平台无关的数据格式(比如xml),然后交给接收方 来处理。
轻量级
相对于xml,json文档更小,解析的速度更快。
(2)基本语法
表示一个对象
{属性名:属性值,属性名:属性值...}
注:
a. 属性名必须使用双引号括起来。
b. 属性的类型可以是string,number,true/false,null,object。
c. 属性值如果是string,必须使用双引号括起来。
表示由对象组成的数组
[{},{},{}...]
(3)使用json
(1)java对象如何转换成json字符串。
使用jackson工具提供的api。(ObjectMapper)
(2)json字符串如何转换成javascript对象。
使用javascript内置对象 JSON.parse()方法。
3. jQuery对ajax的支持
(1)$.ajax方法
用法: $.ajax({});
(2)load方法
向服务器发送异步请求,然后将服务器返回的数据直接添加到符合要求的 节点之上。
代码:
src/main/java
bean
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package bean; public class Stock { private String code; private String name; private int price; public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } }
json
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package json; import java.util.ArrayList; import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import bean.Stock; public class JsonTest { /* * 将java对象转换成json字符串 */ public static void test1() throws JsonProcessingException{ Stock s = new Stock(); s.setCode("600877"); s.setName("中国嘉陵"); s.setPrice(10); //使用jackson提供的工具来转换 ObjectMapper om = new ObjectMapper(); String jsonStr = om.writeValueAsString(s); System.out.println(jsonStr); } public static void test2() throws JsonProcessingException{ List<Stock> stocks = new ArrayList<Stock>(); for(int i = 0; i < 3; i ++){ Stock s = new Stock(); s.setCode("60087" + i); s.setName("中国嘉陵" + i); s.setPrice(10 + i); stocks.add(s); } ObjectMapper om = new ObjectMapper(); String jsonStr = om.writeValueAsString(stocks); System.out.println(jsonStr); } public static void main(String[] args) throws JsonProcessingException { test2(); } }
web
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package web; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; import bean.Stock; public class ActionServlet extends HttpServlet{ public void service( HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException{ response.setContentType( "text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring( uri.lastIndexOf("/"), uri.lastIndexOf(".")); System.out.println("action:" + action); if("/quoto".equals(action)){ //返回几只股票的信息给客户端 List<Stock> stocks = new ArrayList<Stock>(); Random r = new Random(); for(int i = 0; i < 8; i ++){ Stock s = new Stock(); s.setCode("60087" + r.nextInt(10)); s.setName("中国嘉陵" + r.nextInt(10)); s.setPrice(r.nextInt(1000)); stocks.add(s); } ObjectMapper om = new ObjectMapper(); String jsonStr = om.writeValueAsString(stocks); System.out.println(jsonStr); out.println(jsonStr); }else if("/getNumber".equals(action)){ //返回一个随机整数 Random r = new Random(); int number = r.nextInt(1000); System.out.println(number); out.println(number); } } }
webapp
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> /* 使用json语法表示对象 */ function f1(){ var obj = {"code":"600877","name":"中国嘉陵", "price":10}; alert(obj.name); } function f2(){ var obj = {"company":"达内科技", "address":{ "city":"北京", "street":"北三环西路", "room":2046 } }; alert(obj.address.street); } function f3(){ var arr = [{"name":"Sally","age":22}, {"name":"Eric","age":32}]; alert(arr[1].name); } //将json字符串转换成javascript对象 function f4(){ var str = '{"name":"Sally","age":22}'; //调用javascript内置对象JSON提供的方法 //来做转换。 var obj = JSON.parse(str); alert(obj.name); } function f5(){ var str = '[{"name":"Sally","age":22},' + '{"name":"Eric","age":32}]'; //转换完后,得到的是一个数组。 var arr = JSON.parse(str); alert(arr[1].name); } </script> </head> <body style="font-size:30px;"> <a href="javascript:f5();">ClickMe</a> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <script type="text/javascript" src="js/jquery-1.4.3.js"> </script> <script type="text/javascript"> $(function(){ $('#a1').click(f2); }); function f1(){ $('#d1').load('getNumber.do'); } function f2(){ $.ajax({ "url":"getNumber.do", "type":"get", "dataType":"text", "success":function(obj){ $('#d1').html(obj); } }); } </script> </head> <body style="font-size:30px;"> <a id="a1" href="javascript:;">点这儿显示一个随机整数</a><br/> <div id="d1"></div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <style> #d1{ width:480px; height:350px; background-color:black; margin-left:350px; margin-top:20px; } #d2{ color:yellow; background-color:red; height:32px; } table{ color:white; font-style:italic; font-size:24px; } </style> <script type="text/javascript" src="js/jquery-1.4.3.js"> </script> <script type="text/javascript"> $(function(){ //页面加载完成之后, //每隔一段时间执行quoto函数。 setInterval(quoto,5000); }); function quoto(){ //利用jQuery提供的方法($.ajax)来 //向服务器发送异步请求。 $.ajax({ "url":"quoto.do", "type":"get", "dataType":"json", "success":function(obj){ //处理服务器返回的数据 /* obj是服务器返回的数据。 如果服务器返回的是json字符串, 会自动转换成对应的javascript对象。 */ //更新表格 $('#tb1').empty(); for(i = 0; i < obj.length; i ++){ var s = obj[i]; $('#tb1').append( '<tr><td>' + s.code + '</td><td> ' + s.name + '</td><td>' + s.price + '</td></tr>'); } }, "error":function(){ //服务器出错,在这儿处理 } }); } </script> </head> <body style="font-size:30px;"> <div id="d1"> <div id="d2">实时行情</div> <div id="d3"> <table width="100%"> <thead> <tr> <td>代码</td> <td>名称</td> <td>价格</td> </tr> </thead> <tbody id="tb1"> </tbody> </table> </div> </div> </body> </html>
WEB-INF
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>action</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>action</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<dependencies> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.2.3</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.2.3</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.2.3</version> </dependency> </dependencies>
扩展内容:
服务端编码:java.net.URLEncoder.encode()
服务端解码:java.net.URLDecoder.decode()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.util; import java.io.UnsupportedEncodingException; /** * url转码、解码 * * @author lifq * @date 2015-3-17 下午04:09:35 */ public class UrlUtil { private final static String ENCODE = "UTF-8"; /** * URL 解码 * * @return String * @author lifq * @date 2015-3-17 下午04:09:51 */ public static String getURLDecoderString(String str) { String result = ""; if (null == str) { return ""; } try { result = java.net.URLDecoder.decode(str, ENCODE); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } return result; } /** * URL 转码 * * @return String * @author lifq * @date 2015-3-17 下午04:10:28 */ public static String getURLEncoderString(String str) { String result = ""; if (null == str) { return ""; } try { result = java.net.URLEncoder.encode(str, ENCODE); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } return result; } /** * * @return void * @author lifq * @date 2015-3-17 下午04:09:16 */ public static void main(String[] args) { String str = "唐胜伟"; System.out.println(getURLEncoderString(str)); System.out.println(getURLDecoderString(str)); } }