JSON實戰案例--使用JSON進行數據交換實例

本文轉載自查看原文 2015-06-15 15:20 7534 JSON字符串轉換成JavaScript對象/ JSON/ 訪問Javacript對象數組/ Java對象轉換成JSON字符串/ 使用JSON完成級聯下拉列表/ 熱賣商品動態顯示/ 訪問JavaScript對象的屬性

內容：

1.訪問javaScript對象的屬性

2.訪問Javacript對象數組

3.JSON字符串轉換成JavaScript對象

4 .Java對象轉換成JSON字符串

5 .使用JSON完成級聯下拉列表

6 .熱賣商品動態顯示

1 訪問JavaScript對象的屬性

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字符串

Java對象轉換為JSON字符串；

Java數組轉換為JSON字符串；

JSON字符串轉換為Java對象；

JSON字符串轉換為Java數組。

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   17
Zoro   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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 cpu與外設進行數據交換的方式使用jQuery進行兩個div的交換以及數據交換使用 C++ 處理 JSON 數據交換格式你好，C++（26）如何與函數內部進行數據交換？5.1.3 函數參數的傳遞銀行數據交換平台開發總結（原創）使用UDP進行數據發送的實例一使用ggplot2進行數據可視化--案例使用JSON進行數據傳輸的總結 python開發_json_一種輕量級的數據交換格式 Flink task之間的數據交換