1.1 問題
訪問Javascript對象的屬性
1.2 方案
使用初始化的方式創建JavaScript對象,并訪問對象的屬性.
1.3 步驟
步驟一： 新建json01.html文件
添加鏈接的單擊動作，調用方法。
步驟二： 運行查看結果
步驟三： 添加復雜對象
步驟四： 運行查看結果
1.4 完整代碼
json01.html文件代碼如下：
<html> <head> <title>json01.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function f1(){ var obj = {'name':'Luffy','age':17}; alert(obj.name + " " + obj.age); } function f2(){ var obj = {'name':'Luffy', 'address':{ 'city':'Beijing', 'street':'dzs', 'room':17 }}; alert(obj.name + " " + obj.address+" "+obj.address.city ); } </script> </head> <body> <!—- 創建JavaScript對象并查看屬性 --> <a href="javascript:;" onclick="f1();">查看對象屬性1</a> </br> <a href="javascript:;" onclick="f2();">查看對象屬性2</a> </body></html>2 訪問Javacript對象數組
2.1 問題
訪問JavaScript對象數組中的元素
2.2 方案
遵循數組的格式要求，使用方括號開頭和結尾。
2.3 步驟
步驟一： 新建json02.html文件，在文件中添加鏈接進行方法調用的測試。添加第一個方法f3()。
步驟二： 運行查看結果
步驟三： 添加下一個方法f4()
步驟四： 運行查看結果
2.4 完整代碼
json02.html文件代碼如下：
<html> <head> <title>json02.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function f3(){ var arr = [ {'name':'Luffy','age':17}, {'name':'Zoro','age':19}]; alert(arr[1].name); } function f4(){ var obj = {'name':'Luffy', 'friends':[{'name':'Zoro','age':19}, {'name':'Nami','age':18}] }; alert(obj.name + " " + obj.friends[1].name); } </script> </head> <body> <!— 訪問JavaScript對象數組 --> <a href="javascript:;" onclick="f3();">查看數組中的對象屬性1</a> </br> <a href="javascript:;" onclick="f4();">查看數組中的對象屬性2</a> </body></html>3 JSON字符串轉換成JavaScript對象
3.1 問題
將符合JSON格式要求的字符串，轉換為JavaScript對象。
3.2 方案
借助于原生的eval方法或者原生對象JSON.parse(str)方法。
3.3 步驟
步驟一： 新建json03.html文件
在文件中添加腳本代碼，f5（）方法為字符串到對象的轉變過程。
JSON這個原生對象提供了字符串和對象之間轉換的方法，如果瀏覽器無法得到想要的輸出結果，是因為版本太低不支持這個原生對象。
步驟二：運行查看結果
步驟三： 添加方法f6(),實現數組的轉換
步驟四：運行查看結果
步驟五：添加f7()方法，實現對象到字符串的轉換
步驟六： 運行查看結果
3.4 完整代碼
<html> <head> <title>json03.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/json.js"></script> <script type="text/javascript"> /*JSON字符串轉JSON對象*/ function f5(){ var str = '{"name":"Luffy","age":17}'; //第1種方式(不需要任何js文件) //var obj = eval("("+str+")"); 第2種方式(不需要json.js文件) //var obj = JSON.parse(str); //第3種方式(需要json.js文件) //var obj = str.parseJSON(); alert(obj.name); } /*JSON字符串轉JSON數組*/ function f6(){ var str = '[{"name":"Luffy","age":17},' + '{"name":"Zoro","age":19}]'; //第1種方式(不需要json.js文件) var arr = eval("("+str+")"); //第2種方式(需要json.js文件) //var arr = str.parseJSON(); alert(arr[1].name); } /*JSON對象轉JSON字符串*/ function f7(){ var obj = {"name":"Luffy","age":17}; //第1種方式(需要json.js文件) //var str = obj.toJSONString(); //第2種方式(不需要json.js文件) var str = JSON.stringify(obj); alert(str); } </script> </head> <body> <!-- 使用JSON表示數組 --> <a href="javascript:;" onclick="f5();">JSON字符串-->JSON對象</a><br/><br/><br/> <a href="javascript:;" onclick="f6();">JSON字符串-->JSON數組</a><br/><br/><br/> <a href="javascript:;" onclick="f7();">JSON對象-->JSON字符串</a><br/><br/><br/> </body> </html>4 Java對象轉換成JSON字符串
4.1 問題
將Java對象轉換成符合JSON格式的字符串，并測試。
4.2 方案
使用與json-lib.jar相關的jar文件完成類型的轉換。
4.3 步驟
步驟一： 新建實體類 Friend
package com.souvc.json;public class Friend { PRivate String name; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String toString() { return this.name + " " + this.age; }}步驟二： 新建JSONTest類
在該類中添加四個方法，分別用于測試Java對象轉換為JSON字符串，Java數組轉換為JSON字符串，JSON字符串轉換為Java對象，JSON字符串轉換為Java數組。
步驟三： 引入jar文件
在添加jar文件的時候，需要導入6個jar文件，缺一不可。
網盤jar包下載地址：http://yunpan.cn/cQyHfiAYWHmhg 訪問密碼 ab8f
或是到官方下載最新的json-lib工具包 下載地址：http://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.4/json-lib還需要以下依賴包： jakarta commons-lang 2.5 jakarta commons-beanutils 1.8.0 jakarta commons-collections 3.2.1 jakarta commons-logging 1.1.1 ezmorph 1.0.6
步驟四： 添加具體的轉換方法：Java對象轉換為JSON字符串
/** * Java對象轉換為JSON字符串 */ public static void test1() { Friend f = new Friend(); f.setName("Zoro"); f.setAge(19); JSONObject jsonObj = JSONObject.fromObject(f); String jsonStr = jsonObj.toString(); System.out.println(jsonStr); }步驟五：運行結果
{"age":19,"name":"Zoro"}步驟六： Java數組（集合）轉換為JSON字符串
/** * JSON字符串轉換為Java數組 */ public static void test4() { String jsonStr = "[{/"name/":/"Luffy/",/"age/":17}," + " {/"name/":/"Zoro/",/"age/":19}]"; JSONArray jsonArr = JSONArray.fromObject(jsonStr); List<Friend> friends = (List<Friend>) JSONArray.toCollection(jsonArr, Friend.class); for (Friend f : friends) { System.out.println(f); } }運行結果：
[{"age":19,"name":"Zoro1"},{"age":20,"name":"Zoro2"},{"age":21,"name":"Zoro3"}]步驟七：JSON字符串轉換為Java對象
/** * JSON字符串轉換為Java對象 */ public static void test3() { String jsonStr = "{/"name/":/"Luffy/",/"age/":17}"; JSONObject jsonObj = JSONObject.fromObject(jsonStr); Friend friend = (Friend) JSONObject.toBean(jsonObj, Friend.class); System.out.println(friend); }運行結果：
Luffy 17
步驟八： JSON字符串轉換為Java數組（集合）
/** * JSON字符串轉換為Java數組 */ public static void test4() { String jsonStr = "[{/"name/":/"Luffy/",/"age/":17}," + " {/"name/":/"Zoro/",/"age/":19}]"; JSONArray jsonArr = JSONArray.fromObject(jsonStr); List<Friend> friends = (List<Friend>) JSONArray.toCollection(jsonArr, Friend.class); for (Friend f : friends) { System.out.println(f); } }運行結果：
Luffy 17Zoro 19
4.4 完整代碼
Friend.java文件代碼如下：
package com.souvc.json;public class Friend { private String name; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String toString() { return this.name + " " + this.age; }}JSONTest 代碼：
package com.souvc.json;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONArray;import net.sf.json.JSONObject;public class JSONTest { /** * Java對象轉換為JSON字符串 */ public static void test1() { Friend f = new Friend(); f.setName("Zoro"); f.setAge(19); JSONObject jsonObj = JSONObject.fromObject(f); String jsonStr = jsonObj.toString(); System.out.println(jsonStr); } /** * Java數組轉換為JSON字符串 */ public static void test2() { List<Friend> fs = new ArrayList<Friend>(); for (int i = 0; i < 3; i++) { Friend f = new Friend(); f.setName("Zoro" + (i + 1)); f.setAge(19 + i); fs.add(f); } JSONArray jsonArr = JSONArray.fromObject(fs); String jsonStr = jsonArr.toString(); System.out.println(jsonStr); } /** * JSON字符串轉換為Java對象 */ public static void test3() { String jsonStr = "{/"name/":/"Luffy/",/"age/":17}"; JSONObject jsonObj = JSONObject.fromObject(jsonStr); Friend friend = (Friend) JSONObject.toBean(jsonObj, Friend.class); System.out.println(friend); } /** * JSON字符串轉換為Java數組 */ public static void test4() { String jsonStr = "[{/"name/":/"Luffy/",/"age/":17}," + " {/"name/":/"Zoro/",/"age/":19}]"; JSONArray jsonArr = JSONArray.fromObject(jsonStr); List<Friend> friends = (List<Friend>) JSONArray.toCollection(jsonArr, Friend.class); for (Friend f : friends) { System.out.println(f); } } public static void main(String[] args) { test1(); test2(); test3(); test4(); }}5 使用JSON完成級聯下拉列表
5.1 問題
結合異步請求，實現城市的級聯下拉列表。
5.2 方案
分別編寫客戶端腳本和服務器端處理程序。服務器端要實現將Java對象轉換為傳輸的JSON字符串?？蛻舳嗽谑盏竭@個字符串以后進行轉換，變成JavaScript對象，使用對象的各個屬性構造下拉框的Option選項后添加到select下面。
5.3 步驟
步驟一： 新建實體類City
package com.souvc.json;public class City { private String cityName; private String cityValue; public City() { super(); } public City(String cityName, String cityValue) { super(); this.cityName = cityName; this.cityValue = cityValue; } public String getCityName() { return cityName; } public void setCityName(String cityName) { this.cityName = cityName; } public String getCityValue() { return cityValue; } public void setCityValue(String cityValue) { this.cityValue = cityValue; }}步驟二： 新建ActionServlet
package com.souvc.json;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); //獲得請求路徑 String uri = request.getRequestURI(); //截取請求路徑 String action = uri.substring(uri.lastIndexOf("/"), uri .lastIndexOf(".")); if (action.equals("/city")) { String name = request.getParameter("name"); if (name.equals("bj")) { City c1 = new City("海淀", "hd"); City c2 = new City("東城", "dc"); City c3 = new City("西城", "xc"); List<City> cs = new ArrayList<City>(); cs.add(c1); cs.add(c2); cs.add(c3); JSONArray obj = JSONArray.fromObject(cs); String str = obj.toString(); out.println(str); } else if (name.equals("sh")) { City c1 = new City("徐匯", "xh"); City c2 = new City("靜安", "ja"); City c3 = new City("黃浦", "hp"); List<City> cs = new ArrayList<City>(); cs.add(c1); cs.add(c2); cs.add(c3); JSONArray obj = JSONArray.fromObject(cs); String str = obj.toString(); out.println(str); } } out.close(); }}步驟三： 新建city.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>city.html</title> <meta http-equiv="keyWords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript"> function getxmlHttpRequest(){ var xhr = null; if((typeof xmlhttpRequest)!='undefined'){ xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject('Microsoft.XMLHttp'); } return xhr; } function change(v1){ var xhr = getXmlHttpRequest(); xhr.open('post','city.do',true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ var txt = xhr.responseText; var citys = txt.parseJSON(); document.getElementById('s2').innerHTML = ''; for(i=0;i<citys.length;i++){ var op = new Option(citys[i].cityName, citys[i].cityValue); document.getElementById('s2').options[i] = op; } } }; xhr.send('name=' + v1); } </script> </head> <body> <select id="s1" style="width: 120px;" onchange="change(this.value);"> <option value="sh"> 上海 </option> <option value="bj"> 北京 </option> </select> <select id="s2" style="width: 120px;"> </select> </body></html>
步驟四： 運行查看結果
5.4 完整代碼
如上。
6 熱賣商品動態顯示
6.1 問題
每隔5秒鐘，顯示當前賣的最好的三件商品。
6.2 方案
每5秒鐘發送一次Ajax請求，將返回的JSON數組數據顯示到頁面的div中。
6.3 步驟
步驟一： 新建Sale類
package com.souvc.json;public class Sale { private int id; private String prodName; private int qty; public Sale() { super(); } public Sale(int id, String prodName, int qty) { super(); this.id = id; this.prodName = prodName; this.qty = qty; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getProdName() { return prodName; } public void setProdName(String prodName) { this.prodName = prodName; } public int getQty() { return qty; } public void setQty(int qty) { this.qty = qty; }}步驟二： 新建dao包下面的DBUtil類和SaleDAO類
DBUtil.java文件：
package com.souvc.json;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;/** * JDBC管理連接的工具類，可以獲取連接和關閉連接 */public class DBUtil { /** * 獲取連接對象 */ public static Connection getConnection() throws Exception { Connection conn = null; try { Class.forName("com.MySQL.jdbc.Driver"); conn = DriverManager.getConnection( "jdbc:mysql://localhost:3306/csdn", "root", "123456"); } catch (Exception e) { e.printStackTrace(); throw e; } return conn; } /** * 關閉連接對象 */ public static void close(Connection conn) throws Exception { if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); throw e; } } }}執行如下sql語句：
新建SaleDAO.java文件，編寫用于查詢銷量前三的方法。
package com.souvc.json;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.util.ArrayList;import java.util.List;public class SaleDAO { public List<Sale> findAll() throws Exception { List<Sale> sales = new ArrayList<Sale>(); Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { conn = DBUtil.getConnection(); stmt = conn.prepareStatement("select * from (select rownum r," + "a.* from (select * from t_sale order by qty desc) a) " + "c where c.r < 4"); rs = stmt.executeQuery(); while (rs.next()) { Sale s = new Sale(rs.getInt("id"), rs.getString("prodname"), rs .getInt("qty")); sales.add(s); } } catch (Exception e) { e.printStackTrace(); throw e; } finally { DBUtil.close(conn); } return sales; }}步驟三： 新建ActionServlet類
package com.souvc.json;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); // 獲得請求路徑 String uri = request.getRequestURI(); // 截取請求路徑 String action = uri.substring(uri.lastIndexOf("/"), uri .lastIndexOf(".")); if (action.equals("/city")) { String name = request.getParameter("name"); if (name.equals("bj")) { City c1 = new City("海淀", "hd"); City c2 = new City("東城", "dc"); City c3 = new City("西城", "xc"); List<City> cs = new ArrayList<City>(); cs.add(c1); cs.add(c2); cs.add(c3); JSONArray obj = JSONArray.fromObject(cs); String str = obj.toString(); out.println(str); } else if (name.equals("sh")) { City c1 = new City("徐匯", "xh"); City c2 = new City("靜安", "ja"); City c3 = new City("黃浦", "hp"); List<City> cs = new ArrayList<City>(); cs.add(c1); cs.add(c2); cs.add(c3); JSONArray obj = JSONArray.fromObject(cs); String str = obj.toString(); out.println(str); } } else if (action.equals("/sale")) { SaleDAO dao = new SaleDAO(); try { List<Sale> all = dao.findAll(); JSONArray arry = JSONArray.fromObject(all); out.println(arry.toString()); } catch (Exception e) { e.printStackTrace(); throw new ServletException(e); } } out.close(); }}步驟四： 新建sales.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>sales.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style>#d1 { width: 500px; height: 180px; background-color: #fff8dc; border: 1px solid red; margin-left: 350px; margin-top: 50px;}</style> <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script> <script type="text/javascript"> function getXmlHttpRequest(){ var xhr = null; if((typeof XMLHttpRequest)!='undefined'){ xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject('Microsoft.XMLHttp'); } return xhr; } function f1(){ setInterval(f2,5000); } function f2(){ var xhr = getXmlHttpRequest(); xhr.open('post','sale.do',true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ var txt = xhr.responseText; var sales = txt.evalJSON(); var saleInfo = '當前銷量最好的商品是:<br/>'; for(i=0;i<sales.length;i++){ saleInfo += '商品名稱:' + sales[i].prodName + ' 銷量:' + sales[i].qty + '<br/>'; } $('d1').innerHTML = saleInfo; } }; xhr.send(null); } </script> </head> <body onload="f1();"> <div id="d1"></div> </body></html>步驟五：運行查看結果
6.4 完整代碼
源碼： http://yunpan.cn/cQyrTefxWuHfK 訪問密碼 7b77
新聞熱點
疑難解答
