zoukankan      html  css  js  c++  java
  • JSON: JavaScript Object Notation

    JSON是JavaScript Object Notation 的缩写,是JS提供的一种数据交换格式。
    1) JSON对象本质上就是一个JS对象,但是这个对象比较特殊,它可以直接转换为字符串,在不同语言中进行传递,通过工具又可以转换为其他语言中的对象。
    2) 例,有如下一个JSON对象:
      ① {“name”:”sunwukong” , ”age”:18 , ”address”:”beijing” }
      ② 这个对象中有三个属性name、age和address
      ③ 如果将该对象使用单引号引起了,那么他就变成了一个字符串
      ④ ‘{“name”:”sunwukong” , ”age”:18 , ”address”:”beijing” }’
      ⑤ 变成字符串后有一个好处,就是可以在不同语言之间传递。
      ⑥ 比如,将JSON作为一个字符串发送给Servlet,在Java中就可以把JSON字符串转换为一个Java对象

    JSON通过6种数据类型来表示
    1) 字符串
     例子:”字符串”
     注意:不能使用单引号
    2) 数字:
     例子:123.4
    3) 布尔值:
     例子:true、false
    4) null值:
     例子:null
    5) 对象
     例子:{“name”:”sunwukong”, ”age”:18}
    6) 数组
     例子:[1,”str”,true]

    在JS中操作JSON
    1) 创建JSON对象
     var json = {“name1”:”value1”,”name2”:”value2” , “name3”:[1,”str”,true]};
     var json = [{“name1”:”value1”},{“name2”:”value2”}];
    2) JSON对象转换为JSON字符串
     JSON.stringify(JSON对象)
    3) JSON字符串转换为JSON对象
     JSON.parse(JSON字符串)

            //js中操作json
            //1. 编写一个json字符串
            //var jsonStr = '{"lastName":"Tom","email":"tom@atguigu.com","age":22}';
            // json字符串转成json对象
            //var jsonObj = JSON.parse(jsonStr);
            //alert(jsonObj.lastName + "," + jsonObj.email + " , " + jsonObj.age);
            
            //json对象转换成json字符串
            
            //var str = JSON.stringify(jsonObj);
            //alert(str);

    在Java中操作JSON
    1) 在Java中可以从文件中读取JSON字符串,也可以是客户端发送的JSON字符串,所以第一个问题,我们先来看如何将一个JSON字符串转换成一个Java对象。
    2) 首先解析JSON字符串我们需要导入第三方的工具,目前主流的解析JSON的工具大概有三种json-lib、jackson、gson。三种解析工具相比较json-lib的使用复杂,且效率较差。而Jackson和gson解析效率较高。使用简单,这里我们以gson为例讲解。
    3) Gson是Google公司出品的解析JSON工具,使用简单,解析性能好。
    4) Gson中解析JSON的核心是Gson的类,解析操作都是通过该类实例进行。
    5) JSON字符串转换为对象

    String json = "{"name":"张三","age":18}";
    Gson gson = new Gson();
    //转换为集合
    Map<String,Object> stuMap = gson.fromJson(json, Map.class);
    //如果编写了相应的类也可以转换为指定对象
    Student fromJson = gson.fromJson(json, Student.class);

    6) 对象转换为JSON字符串

    Student stu = new Student("李四", 23);
    Gson gson = new Gson();
    //{"name":"李四","age":23}
    String json = gson.toJson(stu);
            
    Map<String , Object> map = new HashMap<String, Object>();
    map.put("name", "孙悟空");
    map.put("age", 30);
    //{"age":30,"name":"孙悟空"}
    String json2 = gson.toJson(map);
            
    List<Student> list = new ArrayList<Student>();
    list.add(new Student("八戒", 18));
    list.add(new Student("沙僧", 28));
    list.add(new Student("唐僧", 38));
    //[{"name":"八戒","age":18},{"name":"沙僧","age":28},
    {"name":"唐僧","age":38}]
    String json3 = gson.toJson(list);        
         // 如果将一个数组格式的json字符串转换成java对象需要用到
         //Gson提供的一个匿名内部类: TypeToken
        TypeToken tk= new TypeToken<List<User>>(){};
        List<User> list2 = gson.fromJson(json,tk.getType());
        System.out.println(list2.get(0));

    JQuery 异步请求返回JSON数据

    1) Servlet 返回json数据

    package com.atguigu.login.servlet;
    
    import java.io.IOException;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.atguigu.login.beans.Employee;
    import com.atguigu.login.dao.EmployeeDao;
    import com.atguigu.login.dao.EmployeeDaoImpl;
    import com.google.gson.Gson;
    
    /**
     * Servlet implementation class GetEmpsJsonStrServlet
     */
    public class GetEmpsJsonStrServlet extends HttpServlet {
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //查询所有的员工信息
            EmployeeDao  employeeDao  = new EmployeeDaoImpl();
            List<Employee> emps = employeeDao.selectAllEmps();
            
            //转换成json字符串
            Gson gson = new Gson();
            
            String jsonStr = gson.toJson(emps);
            
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().println(jsonStr);
        
        }
    
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            // TODO Auto-generated method stub
            doGet(request, response);
        }
    
    }

    2) 页面中处理 json数据

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            //js中操作json
            //1. 编写一个json字符串
            //var jsonStr = '{"lastName":"Tom","email":"tom@atguigu.com","age":22}';
            // json字符串转成json对象
            //var jsonObj = JSON.parse(jsonStr);
            //alert(jsonObj.lastName + "," + jsonObj.email + " , " + jsonObj.age);
            
            //json对象转换成json字符串
            
            //var str = JSON.stringify(jsonObj);
            //alert(str);
            
            $(function(){
                $("#showTable").click(function(){
                    //发送异步请求,获取员工数据(json格式)
                    $.ajax({
                        url:"GetEmpsJsonStrServlet",
                        type:"post",
                        dataType:"json",
                        success:function(data){  // 直接将服务端返回的json字符串直接转换成json对象.
                            var str = "<tr><th>ID</th><th>LastName</th><th>Email</th><th>Gender</th><th>DeptName</th></tr>";
                            for(var i = 0 ;i <data.length;i++){
                                var emp = data[i];
                                str+="<tr align='center'><td>"+emp.id+"</td><td>"+emp.lastName+"</td><td>"+emp.email+"</td><td>"+emp.gender+"</td><td>"+emp.dept.deptName+"</td></tr>";
                            }
                            
                            $("#empTable").html(str);
                        }
                    });                
                    
                });
                
            });
        </script>
    </head>
    <body>
        <input id="showTable" type="button" value="显示员工信息列表" />
        <h1 align="center"> 员工信息列表</h1>
        <table id="empTable" align="center" border="1px" width="70%" cellspacing="0px">
            
        
        </table>
    </body>
    </html>
  • 相关阅读:
    523 vue组件化高级 插槽slot:slot基本使用,具名插槽,编译作用域,作用域插槽
    522 vue父子组件的访问方式: $children、$refs、$parent
    521 vue子组件向父组件传递数据
    520 vue父组件向子组件传递:props基本用法,props数据验证,props中的驼峰标识
    在 React 组件中使用 Refs 指南
    Flutter 代码开发规范
    Angular ZoneJS 原理
    vue中$refs, $emit, $on, $once, $off的使用
    详解Js加法运算符
    JavaScript 异常
  • 原文地址:https://www.cnblogs.com/lemonzhang/p/12885325.html
Copyright © 2011-2022 走看看