zoukankan      html  css  js  c++  java
  • JavaWeb 之 JSON

    一、概述

      1、概念

        JSON:JavaScript Object Notation  JavaScript对象表示法

      2、基本格式

    var p = {"name":"张三","age":23,"sex":"男"};

      3、用途和优点

        (1)json 现在多用于存储和交换文本信息的语法

        (2)进行数据的传输

        (3)JSON 比 XML 更小、更快,更易解析

    二、语法

      1、基本规则

        (1)数据在名称/值对中:json 数据是由键值对构成的。

           ① 键用引号(单双都行)引起来,也可以不使用引号

           ② 值的类型:

             a、数字(整数或浮点数)

             b、字符串(在双引号中)

             c、逻辑值(true 或 false)

             d、数组(在方括号中) 如:{"persons":[{},{}]}

             e、对象(在花括号中) 如: {"address":{"province":"河北"....}}

             f、null :控制

        (2)数据有逗号分隔:多个键值对由逗号分隔

        (3)花括号保存对象:使用 {} 定义 json 格式

        (4)方括号保存数据:[]

      2、获取数据

        (1)json对象.键名

        (2)json对象["键名"]

        (3)数组对象[索引]

        (4)遍历对象

          代码演示:

     1   <script>
     2         //1.定义基本格式
     3         var person = {"name": "张三", age: 23, 'sex': true};
     4 
     5         var ps = [{"name": "张三", "age": 23, "sex": true},
     6             {"name": "李四", "age": 24, "sex": true},
     7             {"name": "王五", "age": 25, "sex": false}];
     8 
     9 
    10 
    11 
    12         //获取person对象中所有的键和值
    13         //for in 循环
    14        /* for(var key in person){
    15             //这样的方式获取不行,key 是字符串类型。因为相当于  person."name"
    16             //alert(key + ":" + person.key);
    17             alert(key+":"+person[key]);
    18         }*/
    19 
    20        //获取ps中的所有值
    21         for (var i = 0; i < ps.length; i++) {
    22             var p = ps[i];
    23             for(var key in p){
    24                 alert(key+":"+p[key]);
    25             }
    26         }
    27 
    28     </script>

    三、JSON 数据和 Java 对象的相互转换

      1、JSON 解析器

        常见的解析器:Jsonlib,Gson,fastjson,jackson

      2、Java 对象转换为 JSON

        使用步骤:

          (1)导入 Jackson 的相关 jar 包

          (2)创建 Jackson 的核心对象 ObjectMapper

          (3)调用 ObjectMapper 的相关方法进行转换

            ① 转换方法

    writeValue(参数1,obj):
    

                参数1:

              •   File:将obj对象转换为JSON字符串,并保存到指定的文件中
              •   Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
              •   OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
    writeValueAsString(obj):将对象转为json字符串

            ② 注解

     @JsonIgnore:排除属性。   // 加到 JavaBean 上时,便不会对该属性转化为 json 数据
     @JsonFormat:属性值得格式化 // 多用于时间类型的成员变量上,来格式化,如@JsonFormat(pattern = "yyyy-MM-dd")
    

      

            ③ 复杂 java 对象转换

               对于 List 和 Map 集合来说,转换成 json 数据后,会转换为一个对象数组字符串。

      3、JSON 对象转为 Java 对象

         步骤同上,只是调用的方法不同。

         转化为 Java 对象的方法:

    readValue(json字符串数据,转化为类型的Class)
    

          代码演示:

     1 public void test() throws Exception {
     2        //1.初始化JSON字符串
     3         String json = "{"sex":"男","name":"张三","age":23}";
     4 
     5         //2.创建ObjectMapper对象
     6         ObjectMapper mapper = new ObjectMapper();
     7         //3.转换为Java对象 Person对象
     8         Person person = mapper.readValue(json, Person.class);
     9 
    10         System.out.println(person);
    11     }

    四、检验用户是否存在案例

    需求:

    1、在注册页面进行验证,当用户输入用户名时,如果已经存在该用户名,提示“此用户名太受欢迎,请更换一个”;

    2、如果没有用户名存在,提示"用户名可用"

    代码实现:

      注册页面:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>注册页面</title>
     6     <script src="js/jquery-3.3.1.min.js"></script>
     7 
     8 
     9     <script>
    10         //在页面加载完成后
    11         $(function () {
    12            //给username绑定blur事件
    13            $("#username").blur(function () {
    14                //获取username文本输入框的值
    15                var username = $(this).val();
    16                //发送ajax请求
    17                //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
    18                //                         {"userExsit":false,"msg":"用户名可用"}
    19                $.get("findUserServlet",{username:username},function (data) {
    20                    //判断userExsit键的值是否是true
    21 
    22                    // alert(data);
    23                    var span = $("#s_username");
    24                    if(data.userExsit){
    25                        //用户名存在
    26                        span.css("color","red");
    27                        span.html(data.msg);
    28                    }else{
    29                        //用户名不存在
    30                        span.css("color","green");
    31                        span.html(data.msg);
    32                    }
    33                },"json");   // 设置返回数据为json
    34 
    35            }); 
    36         });
    37 
    38     </script>
    39 </head>
    40 <body>
    41 
    42 
    43     <form>
    44 
    45         <input type="text" id="username" name="username" placeholder="请输入用户名">
    46         <span id="s_username"></span>
    47         <br>
    48         <input type="password" name="password" placeholder="请输入密码"><br>
    49         <input type="submit" value="注册"><br>
    50 
    51     </form>
    52 
    53 </body>
    54 </html>

      服务器端代码:

     1 import com.fasterxml.jackson.databind.ObjectMapper;
     2 import javax.servlet.ServletException;
     3 import javax.servlet.annotation.WebServlet;
     4 import javax.servlet.http.HttpServlet;
     5 import javax.servlet.http.HttpServletRequest;
     6 import javax.servlet.http.HttpServletResponse;
     7 import java.io.IOException;
     8 import java.util.HashMap;
     9 import java.util.Map;
    10 
    11 @WebServlet("/findUserServlet")
    12 public class FindUserServlet extends HttpServlet {
    13     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    14         //1.获取用户名
    15         String username = request.getParameter("username");
    16 
    17         //2.调用service层判断用户名是否存在
    18 
    19         //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
    20         //                         {"userExsit":false,"msg":"用户名可用"}
    21 
    22         //设置响应的数据格式为json
    23         response.setContentType("application/json;charset=utf-8");
    24         Map<String,Object> map = new HashMap<String,Object>();
    25 
    26         if("jack".equals(username)){
    27             //存在
    28             map.put("userExsit",true);
    29             map.put("msg","此用户名太受欢迎,请更换一个");
    30         }else{
    31             //不存在
    32             map.put("userExsit",false);
    33             map.put("msg","用户名可用");
    34         }
    35 
    36         //将map转为json,并且传递给客户端
    37         //将map转为json
    38         ObjectMapper mapper = new ObjectMapper();
    39         //并且传递给客户端
    40         mapper.writeValue(response.getWriter(),map);
    41 
    42 
    43     }
    44 
    45     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    46         this.doPost(request, response);
    47     }
    48 }
  • 相关阅读:
    基于 HTML5 + WebGL 的 3D 风力发电场
    基于HTML5 WebGL的工业化3D电子围栏
    基于 HTML5 WebGL 和 VR 技术的 3D 机房数据中心可视化
    基于 HTML5 Canvas 的 Web SCADA 组态电机控制面板
    基于 HTML5 WebGL 与 WebVR 3D 虚拟现实的可视化培训系统
    基于 HTML5 WebGL 的 3D 服务器与客户端的通信
    什么是 SUID, SGID 和 Sticky bit
    贝塞尔曲线切割圆角
    iOS-获取当前View所在的控制器
    block(八)作用域
  • 原文地址:https://www.cnblogs.com/niujifei/p/11630754.html
Copyright © 2011-2022 走看看