JSON技術
1、json介紹與入門
提示：js繼承，js閉包，js原型對象
鍵值對，格式的數據。類似Map集合的數據結構 properties 集合鍵值對數據
輕量級：鍵值對，結構簡單
重量級：xml格式，結構復雜
1.1、什么是json
中括號保存數組。
1.2、json數據的格式
鍵值對：
對象：
數組:
格式講解：
“employee”：[
{“username1” : “zhangsan1”，”age1” : ”18” }，
{“username2” : “zhangsan2”，”age2” : ”18” }，
{“username3” : “zhangsan3”，”age3” : ”18” }，
]
1.一個對象可以有多個屬性，一個屬性對應一個值，對象用 { } ，屬性和值都必須用“”包裹，屬性與值之間用冒火隔開，屬性與屬性之間用逗號隔開，
比如：{“username1” : “zhangsan1”，”age1” : ”18” }
2.多個對象之間用逗號隔開；
3.值可以為數組，數組中包含很多對象，數組必須用 [ ] , 比如 “employee”：[ 很多對象 ]
4.json最外層需要用{ }包裹
1.3、json格式文本轉換js對象
獲取json對象數據和遍歷json數組：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</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"> <script type="text/javascript"> //操作json對象 function test1() { //定義一個json格式的字符串 var text = '{"firstName":"John", "lastName":"Doe"}'; //將json格式的字符串，轉換成javascript對象 var obj = JSON.parse(text); alert(obj.firstName); alert(obj.lastName); } //test1(); //操作json數組 function test2() { //定義一個json格式的字符串 var text = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}'; //將json格式的字符串，轉換成javascript對象 var obj = JSON.parse(text); alert(obj.employees[0].firstName); alert(obj.employees[1].firstName); alert(obj.employees[2].firstName); } test2(); </script> </head> <body> </body> </html>
注意事項：
1.單引號可以包裹雙引號
2.注意Jason數組與Jason對象轉換后獲取的格式
1.4、使用json的三級聯動案例
需求：完成省市縣三級聯動
頁面截圖：
效果：
1） 頁面加載完成的時候，就要加載完成省和直轄市的數據
2） 選擇省得時候，出現對應的市
3）選擇市的時候，出現對應的縣
數據庫分析：
--獲取所有的省和直轄市
select * from province where parentid = 0;
--獲取所有的市（內蒙古中）
select * from province where parentid = 15;
--獲取所有的縣（錫林郭勒盟）
select * from province where parentid = 1525;
思路：
1） 頁面加載完成之后，省地區的數據如何加載完成？
Window.onload 啟動js函數，
發送ajax請求，獲取省地區的數據
將數據返回給瀏覽器，
將數據添加到省一級地區的select標簽中去。
2） 在用戶選擇下拉省一級選項之后，市地區數據如何加載完成？
Onchange事件，啟動js函數
發送ajax請求，獲取市地區的數據
將數據返回瀏覽器
將數據添加到市一級地區的select標簽中去。
流程：
頁面js：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="root" value="${pageContext.request.contextPath }"/> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>省市頁面</title> <script type="text/javascript"> //獲取ajax核心對象 function getXHR(){ var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } //第一步：完成省一級地區數據的加載 window.onload = function(){ //發送ajax請求，給服務器 var xhr = getXHR(); xhr.open("get","${root}/getData?parentid=0",true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = xhr.responseText; //將json格式字符串，轉換成js對象 var arr = JSON.parse(data); var _province = document.getElementById("province"); //遍歷循環數組，將數據添加到省一級地區的select標簽中去 for ( var i = 0; i < arr.length; i++) { //不斷的創建option標簽 var _option = document.createElement("option"); //設置當前地區的代號 _option.value = arr[i].codeid; _option.innerHTML = arr[i].cityName; _province.appendChild(_option); } } }; }; //第二步：選擇省的時候，出現對應的市 function _getCity(_this){ //獲取市的數據的時候，將原來的數據清空 var _city = document.getElementById("city"); _city.length = 1; var _area = document.getElementById("area"); _area.length = 1; var xhr = getXHR(); xhr.open("get","${root}/getData?parentid="+_this.value,true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = xhr.responseText; //將json格式字符串，轉換成js對象 var arr = JSON.parse(data); //遍歷循環數組，將數據添加到省一級地區的select標簽中去 for ( var i = 0; i < arr.length; i++) { //不斷的創建option標簽 var _option = document.createElement("option"); //設置當前地區的代號 _option.value = arr[i].codeid; _option.innerHTML = arr[i].cityName; _city.appendChild(_option); } } }; } //第三步：選擇市的時候，出現對應的縣 function _getArea(_this){ //獲取縣的數據的時候，將原來的數據清空 var _area = document.getElementById("area"); _area.length = 1; var xhr = getXHR(); xhr.open("get","${root}/getData?parentid="+_this.value,true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = xhr.responseText; //將json格式字符串，轉換成js對象 var arr = JSON.parse(data); //遍歷循環數組，將數據添加到省一級地區的select標簽中去 for ( var i = 0; i < arr.length; i++) { //不斷的創建option標簽 var _option = document.createElement("option"); //設置當前地區的代號 _option.value = arr[i].codeid; _option.innerHTML = arr[i].cityName; _area.appendChild(_option); } } }; } </script> </head> <body> <center> <select id="province" name="province" onchange="_getCity(this);"> <option value="none">--請選擇省--</option> </select> <select id="city" name="city" onchange="_getArea(this);"> <option value="none">--請選擇市--</option> </select> <select id="area" name="area" > <option value="none">--請選擇縣或區--</option> </select> </center> </body> </html>
Servlet代碼：
import java.io.IOException; import java.sql.SQLException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.dbutils.QueryRunner; import org.apache.commons.dbutils.handlers.BeanListHandler; import cn.itcast.domain.Province; import cn.itcast.utils.JDBCUtils; import flexjson.JSONSerializer; public class GetDataServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 獲取請求參數 String parameter = request.getParameter("parentid"); int parentid = Integer.parseInt(parameter); QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource()); String sql = "select * from province where parentid = ?"; try { List<Province> list = qr.query(sql, new BeanListHandler<Province>(Province.class), parentid); //使用flexjson技術將list集合解析成json格式字符串 //創建轉換對象 JSONSerializer serializer = new JSONSerializer(); //調用轉換的方法 String serialize = serializer.serialize(list); //將數據，發給瀏覽器 response.setContentType("text/html;charset=utf-8"); response.getWriter().write(serialize); } catch (SQLException e) { e.printStackTrace(); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }