（十二）Json的使用（上）

一、什么是JSON

　　1.1　　javaScript中定义对象的几种方式

　　　　使用内置对象

　　　　自定义对象构造
　　　　使用JSON符号

　　（1）使用内置对象

JavaScript可用的内置对象可分为两种： 1，JavaScript语言原生对象（语言级对象），如String、Object、Function等；
2，JavaScript运行期的宿主对象（环境宿主级对象），如window、document、bod

　　（2）自定义对象构造

<script type="text/javascript">
    function People(){
        this.姓名="张三";
        this.age=15;    
    }
    var p1=new People();
    window.alert(p1.姓名);

</script>

　　（3）使用JSON符号：下文详解

二、JSON的详解

　　2.1　　JSON的作用

JSON不仅可以定义对象，同时也是一种数据交换格式，用于多种语言之间的数据交换，比如java语言和c语言都以json格式的数据为中介。java把数据转换为json格式传给c语言，c语言接收json格式的数据并处理。
在JavaScript中，JSON被理解为对象。通过字符串形式的JSON，数据可以很方便地解析成JavaScript独享，并进行数据的读取传递。通过JSON，在一定程度上客服了JavaScript对象无法作为参数系列化传递的问题。

　　2.2　　JSON的结构

　　2.2.1　　JSON的结构一：“名称/值”对的集合。

- 　　　　简单的JSON

var person={name:"刘德华",age:25,sex:"男"}

- - 　　其中name、age、sex为键，因为默认只能是String类型的，所以就不用加“”来说明是字符串（加“”也行）。值的类型可以是多种类型，这里用了String、number类型，键值之间用冒号（：）隔开。
  - JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或者工具包，JavaScript默认将JSON当做一个对象处理.
  - 　　person是一个javaScript中的对象，取值的方法同其他对象一样，例如：window.alter(person.name)

　2.2.2　　JSON的结构二：值的有序列表(数组)。

<script type="text/javascript">
    
    var a=[{name:"张三",age:15},{name:"李四",age:20},{name:"王五",age:25}];
    
     alert(a[0].name);
</script>

这里的json对象[{name:"张三",age:15},{name:"李四",age:20},{name:"王五",age:25}] 就是一个数组。

　　2.3　　JSON中定义数组

<script type="text/javascript">
     //普通定义数组方法
     var arr=new Array();
     arr.push("aa");
     arr.push("bb");
     arr.push("cc");
     arr.push("dd");
     window.alert(arr.length);
     
     //json中定义数组方式
     var arrJson=["aa",2,"bb"];
     window.alert(arrJson[1]);
</script>

<script type="text/javascript">
    var arrJson=[
        //数组里每个元素都是一个对象
        {name:"张三",age:15},
        {name:"李四",age:20},
        {name:"王五",age:25}
    ];
    window.alert(arrJson.length);
    for(var i=0;i<arrJson.length;i++){
        //循环这个数组，取出每个对象并操作
        var object=arrJson[i];
        window.alert(object.name+"
");
        
    }
</script>

三、服务器端和客户端的数据转换（对象和json格式字符串的转换）

我们知道，对象是无法作为参数传递从客户端传送到服务端的（或从服务器端传到客户端），也就是说我们在html/jsp页面得到的对象无法把对象（引用）传到服务器端的，就算传过去也只是一堆的字符串，服务端无法把这堆字符串转为对象获取对象的属性值。　
- 　　当我们想要把对象传到服务器端，就需要把客户端得到的JSON对象转换为Json格式的字符串，然后再传到服务器端，服务器端就可以解析json格式的字符串数据然后获取想要的数据。
- 　　当我们想要把服务器端的对象传到客户端，就需要把服务器端的对象转为Json格式的字符串，然后在客户端解析并获取想要的数据。

　　3.1　　在客户端把json对象转为字符串。（准备将数据发送给服务器端）

前提：到http://www.json.org/ 网站下载Json对象与字符串互转需要的工具包并引入到客户端页面中。

<script type="text/javascript">
    var people={
        name:"张三",
        age:15,
        sex:"男",        
    };
    var strJson=JSON.stringify(people);  //把json对象people转为字符串
    window.alert(strJson);
</script>

结果：

　　3.2　　在客户端把String字符串转为JSON对象（收到服务器端发送的String）

前提：到http://www.json.org/ 网站下载Json对象与字符串互转需要的工具包并引入到客户端页面中。

<script type="text/javascript">
    var people={
        name:"张三",
        age:15,
        sex:"男",        
    };
    var strJson=JSON.stringify(people);  //将json对象转为字符串
    window.alert(strJson);
            
    var jsonObj=JSON.parse(strJson);    //将字符串转为JSON对象
    window.alert(jsonObj);
</script>

结果：

　　3.3　　　在服务器端把json格式的字符串转化为JSON对象。（服务器端接收到来自客户端的String数据）

前提：到http://www.json.org/ 网站下载Json对象与字符串互转需要的工具包并引入到客户端页面中。

本例中使用的是google的gson

　　3.3.1　　在服务器端将对象（javabean）转为JSON格式的字符串

    public String execute(){
        //    String strJson="{name:"张三",age:15}";
            
            UserBean user=new UserBean("张三", "男",15);  
            
            Gson gson=new Gson();
            String userStrJson=gson.toJson(user);  //Gson.toJson(obj) 将一个对线转为Json数据格式的String字符串。
            
            System.out.println(userStrJson);
            return null;
        }

结果：

　　3.3.2　　　在服务器端将对象（map）转为JSON格式的字符串

    public String execute(){
        //    String strJson="{name:"张三",age:15}";
            
            UserBean user=new UserBean("张三1", "女",25);  
    
            Map<String, Object> map=new HashMap<String,Object>();
            map.put("key_1", "value_1");
            map.put("key_2", user);  //这个map的键的值是一个对象
            

            Gson gson=new Gson();    
            String userStrJson=gson.toJson(map);  //Gson.toJson(obj) 将一个对线转为Json数据格式的String字符串。
            
            System.out.println(userStrJson);
            return null;
        }

结果：

　　3.3.3　　　在服务器端将对象（list）转为JSON格式的字符串

public class GsonTest {
        public String execute(){
        //    String strJson="{name:"张三",age:15}";
            
            UserBean user=new UserBean("张三", "男",25);  
            UserBean user2=new UserBean("李四", "女",15);  
    
            ArrayList<UserBean> list=new ArrayList<UserBean>();
            list.add(user);
            list.add(user2);    

            Gson gson=new Gson();    
            String userStrJson=gson.toJson(list);  //Gson.toJson(obj) 将一个对线转为Json数据格式的String字符串。
            
            System.out.println(userStrJson);
            return null;
        }
}

结果：

　　3.3.4　　　在服务器端将String字符串转为（javabean、map、list等对象）

将string转为javabean

    private static void str_to_javabean() {
            String user="{"userName":"李四","sex":"女","age":15}";
            
            Gson gson=new Gson();
            UserBean userbean=gson.fromJson(user,UserBean.class); //将string类型转为javaBean对象
            
　　　　System.out.println(userbean.getUserName()+userbean.getSex()+userbean.getAge());    
            
        }

结果：

将string转为map对象

        /**
         *将字符串转为javaBean对象
         */

        private static void str_to_map() {
            String user="{"userName":"李四","sex":"女","age":15}";
            
            Gson gson=new Gson();
            Map<String,Object> map=gson.fromJson(user,Map.class);  //将字符串转为map对象
            
            if(map!=null){
                System.out.println(map.get("userName")+"	"+map.get("sex")+"	"+map.get("age"));
            }
                
            
        }

结果：

注意这里的map的键的值如果是int类型的那么转换之后会自动变成double类型，因为Map<String,Object> 中Object是不确定的，而如果是bean中的int型不会被转为double类型，因为bean中已经定义了具体的类型。

将string转为list对象
- 将string转为list对象的方法比较特殊，

    private static void str_to_list() {
            String user="[{"userName":"张三","age":15,"sex":"男"},{"name":"李四","age":25,"sex":"女"}]";
        
            Gson gson=new Gson();
            
             List<UserBean> list = gson.fromJson(user,  
                        new TypeToken<List<UserBean>>() {  
                        }.getType());  
         
            System.out.println(list.get(0).getUserName());
            System.out.println(list.get(0).getAge());
            System.out.println(list.get(0).getSex());
        
        }

结果：

如果用的是gson.fromJson(user,List.class) 获取到的是字符串的格式java中的Json格式的数据，即键值之间不是冒号（冒号是服务端的格式）而是等号，如下图：

可知这是一个map，只能用Map.get("key") 来获取值。

四、客户端和服务器端的数据交互

　　4.1　　传统交互方式　　

　　　　4.1.1　　客户端发送数据到服务器端接受数据

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  %>
<% String path=request.getContextPath(); %>
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/lib/json2.js"></script>
<script type="text/javascript">

function send_to_service(){
    //定义一个json对象
    var people={
        userName:"张三",
        age:20,
        sex:"女",        
    };
    //把json对象转为json格式的字符串
         var strPeople=JSON.stringify(people);
     //把json格式的字符串传给后台
         window.location.href="<%=path%>/struts/exam!getJsonStr?jsonStr="+strPeople;
    
    }
</script>
</head>
<body>
    <input type="button" value="发送数据给服务器端" onclick="send_to_service();">
</body>
</html>

```
GsonTest.java
```

package action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;

import javabean.UserBean;

public class GsonTest  extends BaseAction{
        public String execute(){
            return null;
        }
        /**
         *获取客户端的传过来的数据
         */
        public String getJsonStr(){
            String strJson=request.getParameter("jsonStr");
             Gson gson=new Gson();
             UserBean userbean=gson.fromJson(strJson, UserBean.class);
             System.out.println(userbean.getUserName());
             System.out.println(userbean.getAge());
             System.out.println(userbean.getSex());
             
            
            return null;
        }
}

结果：

　　4.1.2　　服务器端发送数据到用户端接受数据并显示（两种方法）

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  %>
<% String path=request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/lib/json2.js"></script>
<script type="text/javascript">
    function send_to_user(){    
        window.location.href="<%=path%>/struts/exam!send_to_user";
    }

</script>
</head>
<body>

    <input type="button" value="服务器端发送数据到客户端" onclick="send_to_user();">
</body>
</html>

struts.xml

<struts>

    <constant name="struts.devMode" value="true" />
    <constant name="struts.enable.DynamicMethodInvocation" value="true" />
       <constant name="struts.i18n.encoding" value="UTF-8"></constant>
    <constant name="struts.multipart.maxSize" value="209715200"></constant>
    <constant name="struts.action.extension" value="action,,"></constant>
    <constant name="struts.i18n.reload" value="true"></constant>
    <constant name="struts.ui.theme" value="simple" />
    <constant name="struts.configuration.xml.reload" value="true"></constant>
    <constant name="struts.ognl.allowStaticMethodAccess" value="true"></constant>
    <constant name="struts.handle.exception" value="true"></constant>
    <constant name="struts.devMode" value="true" />
    <package name="default" namespace="/struts" extends="struts-default">

    <action name="exam" class="action.GsonTest">
        <result name="show">/show.jsp</result>
    </action>
    </package>
</struts>

GsonTest.java（这个类负责从数据库中获取数据，然后把数据放到作用域中，以供jsp显示）

package action;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.ResultSetHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
import com.opensymphony.xwork2.ActionContext;

import DBUtil.DBUtil;
import javabean.UserBean;

public class GsonTest  extends BaseAction{
        public String execute(){
            return null;
        }
        
        /**
         *从数据库中获取数据然后发送到客户端
         */
        public String send_to_user(){
            
            Connection conn=null;
            String sql="select * from user ";
            
            QueryRunner query=new QueryRunner();
            try {
                conn=DBUtil.getConn();  //DBUtil.getConn()这个方法提供一个数据库的连接
                //从数据库取到数据 
                List<UserBean>  userList=query.query(conn, sql, new BeanListHandler<UserBean>(UserBean.class)); //注意，这里的userBean的构造方法至少得有一个是空的构造方法，否则将无法创建对象导致报错
                        
                //把数据转为json格式字符串
                Gson gson=new Gson();
                String users=gson.toJson(userList);
                
                //把json格式的字符串放到值域中
                request.setAttribute("users", users);  
                
                //把List对象放到值域中,用于对比参照
                request.setAttribute("usersObj", userList);
                
            } catch (SQLException e) {
                e.printStackTrace();
            }finally{
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                
            }
            
            return "show";
        }
    
}

show.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/lib/json2.js"></script>
<script type="text/javascript">
        window.onload=function(){
        //拿到值域中的json格式的数据
            var strusers='${requestScope.users}';  //这里不能用struts标签中的 property属性 来获取，否则报错
        //把json格式的数据转为对象    
            var userObj=JSON.parse(strusers);
            
            for(var i=0;i<userObj.length;i++){
                //取出userObj中的每一个对象
                var user=userObj[i];
                
                //创建表格元素
                var Tr=document.createElement("tr"); //创建tr标签
                var usernameTd=document.createElement("td");
                var ageTd=document.createElement("td");
                var sexTd=document.createElement("td");
                
                //给表格标签元素赋值
                usernameTd.innerHTML=user.userName;
                ageTd.innerHTML=user.age;
                sexTd.innerHTML=user.sex;
                
                //组装HTML对象
                Tr.append(usernameTd);
                Tr.append(ageTd);
                Tr.append(sexTd);
                document.getElementById("tbody").append(Tr);  //append方法添加到某一元素的直接子标签，而table的直接子标签是thead、tfoot、tbody
                                                             //这里如果改成document.getElementById("table").append(Tr)则无法显示
            }
        }

</script>
</head>
<body>
    <s:debug></s:debug>
            <h2>显示值域中json格式的数据 </h2>
            <table border="1" width="100%" id="table">
                <tbody id="tbody">
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tbody>
            </table>
            
            
            <h2> 显示值域中集合的数据 </h2>
    <table border="1" width="100%">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    
    <s:iterator value="#request.usersObj" var="user">
        <tr>        
            <td><s:property  value="#user.getUserName()"/></td>
            <td><s:property  value="#user.getSex()"/></td>
            <td><s:property  value="#user.getAge()"/></td>
        </tr>
    </s:iterator>
    
    </table>
</body>
</html>

结果：

（ 十二）Json的使用（上）

一、什么是JSON

1.1 javaScript中定义对象的几种方式

（1）使用内置对象

（2）自定义对象构造

（3）使用JSON符号：下文详解

二、JSON的详解

2.1 JSON的作用

2.2 JSON的结构

2.2.1 JSON的结构一：“名称/值”对的集合。

简单的JSON

2.2.2 JSON的结构二：值的有序列表(数组)。

2.3 JSON中定义数组

三、服务器端和客户端的数据转换（对象和json格式字符串的转换）

3.1 在客户端把json对象转为字符串。（准备将数据发送给服务器端）

3.2 在客户端把String字符串转为JSON对象（收到服务器端发送的String）

3.3 在服务器端把json格式的字符串转化为JSON对象。（服务器端接收到来自客户端的String数据）

3.3.1 在服务器端将对象（javabean）转为JSON格式的字符串

3.3.2 在服务器端将对象（map）转为JSON格式的字符串

3.3.3 在服务器端将对象（list）转为JSON格式的字符串

3.3.4 在服务器端将String字符串转为（javabean、map、list等对象）

将string转为map对象

将string转为list对象

四、客户端和服务器端的数据交互

4.1 传统交互方式

4.1.1 客户端发送数据到服务器端接受数据

4.1.2 服务器端发送数据到用户端接受数据并显示（两种方法）

（十二）Json的使用（上）

　　1.1　　javaScript中定义对象的几种方式

　　（1）使用内置对象

　　（2）自定义对象构造

　　（3）使用JSON符号：下文详解

　　2.1　　JSON的作用

　　2.2　　JSON的结构

　　2.2.1　　JSON的结构一：“名称/值”对的集合。

　　　　简单的JSON

　2.2.2　　JSON的结构二：值的有序列表(数组)。

　　2.3　　JSON中定义数组

　　3.1　　在客户端把json对象转为字符串。（准备将数据发送给服务器端）

　　3.2　　在客户端把String字符串转为JSON对象（收到服务器端发送的String）

　　3.3　　　在服务器端把json格式的字符串转化为JSON对象。（服务器端接收到来自客户端的String数据）

　　3.3.1　　在服务器端将对象（javabean）转为JSON格式的字符串

　　3.3.2　　　在服务器端将对象（map）转为JSON格式的字符串

　　3.3.3　　　在服务器端将对象（list）转为JSON格式的字符串

　　3.3.4　　　在服务器端将String字符串转为（javabean、map、list等对象）

　　4.1　　传统交互方式　　

　　　　4.1.1　　客户端发送数据到服务器端接受数据

　　4.1.2　　服务器端发送数据到用户端接受数据并显示（两种方法）