你的位置:首页 > Java教程

[Java教程]使用JSON进行数据交换实例


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

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 get= null;        if((typeof ){         xhr = new else {         xhr = new ActiveXObject('Microsoft.);        }        return xhr;    }    function change(v1){      var xhr = get'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" onchange="change(this.value);">      <option value="sh">        上海      </option>      <option value="bj">        北京      </option>    </select>    <select id="s2" >    </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 get= null;      if((typeof ){         xhr = new else {         xhr = new ActiveXObject('Microsoft.);        }        return xhr;    }    function f1(){      setInterval(f2,5000);    }    function f2(){      var xhr = get'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