JSON实战案例--使用JSON进行数据交换实例

内容：

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

秒客网

JSON实战案例--使用JSON进行数据交换实例

相关文章