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

87 阅读 0 评论 58 点赞

我是靠谱客的博主知性水壶，最近开发中收集的这篇文章主要介绍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:;" οnclick="f1();">查看对象属性1</a>
</br>
<a href="javascript:;" οnclick="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:;" οnclick="f3();">查看数组中的对象属性1</a>
</br>
<a href="javascript:;" οnclick="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:;" οnclick="f5();">JSON字符串-->JSON对象</a><br/><br/><br/>
<a href="javascript:;" οnclick="f6();">JSON字符串-->JSON数组</a><br/><br/><br/>
<a href="javascript:;" οnclick="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;" οnchange="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 οnlοad="f1();">
<div id="d1"></div>
</body>
</html>