JSON---语法,遍历,案例(ajax和json)检验用户名是否存在

JSON

概念:
JavaScript Object Notation ;JavaScript对象表示法 ,现在多用于存储和交换文本信息的语法,进行数据的传输
语法:
  1. 基本规则
    • 数据在名称/值对中:json数据是由键值对构成
      • 键用引号引起来,也可以不用引号
      • 值的取值范围:
        1. 数字(整数或浮点数)
        2. 字符串(在双引号中)
        3. 逻辑值(true 或 false)
        4. 数组(在方括号中)
        5. 对象(在花括号中)
        6. null
    • 数据由逗号分隔:多个键值对有逗号分隔
    • 花括号保存对象
    • 方括号保存数组
    //例:
    var person = {"name":“张三”,”age“:23,"gender":"男"};
    
  2. 获取数据
    1. json.键名
    <script>
        var persons = {"name":"张三","age":23,"gender":"男"};
    alert(persons.name)
    alert(persons["gender"])
    </script>
    
    1. json[“键名”]
    2. 数组对象[索引]
    <script>
        var p2 = [
                {"name":"张三","age":23,"gender":"男"},
                {"name":"李四","age":24,"gender":"男"},
                {"name":"王五","age":25,"gender":"女"}
            ]
            alert(p2[1].name)
    </script>
    
  3. 遍历json数据
<script>
    var persons = {"name":"张三","age":23,"gender":"男"};
for (var key in persons){
    /*只能通过[]的方式获取值*/
    alert(key + ":" + persons[key])
}

var p2 = [
    {"name":"张三","age":23,"gender":"男"},
    {"name":"李四","age":24,"gender":"男"},
    {"name":"王五","age":25,"gender":"女"}
]

//遍历p2
for (var i = 0; i < p2.length; i++){
    //获取数组中的每一个json对象
    var p = p2[i];
    for (var key in p){
        alert(key + ":" + p[key])
    }
}
</script>
JSON数据和Java对象的相互转换
JSON解析器:Jsonlib,Gson,fastjson,jsckson
  1. JSON转为java对象

    使用步骤

    1. 导入jackson的相关jar包

      https://pan.baidu.com/s/15ycI4TKMtGkcxradwXGhrw
      提取码:25mz

    2. 创建jackson的核心对象 ObjectMapper

    3. 调用方法进行转换

    //json字符串转换为对象
    @Test
    public void test5() throws Exception {
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":34}";
        ObjectMapper mapper = new ObjectMapper();
        //参数1:json字符串;参数2:要转换的对象的字节码
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);
    
    }
    
  2. Java对象转换为JSON
    1. 使用步骤

      1. 导入jackson的相关jar包

        https://pan.baidu.com/s/15ycI4TKMtGkcxradwXGhrw
        提取码:25mz

      2. 创建jackson的核心对象 ObjectMapper

      3. 调用方法进行转换

      //json对象转换为json字符串
      @Test
      public void test1() throws Exception {
          //创建Perso对象
          Person p = new Person();
          p.setName("张三");
          p.setAge(23);
          p.setGender("男");
          //创建jackson核心对象
          ObjectMapper mapper = new ObjectMapper();
          /*
              * 转换的方法:
              *   writeValue(参数1,obj):
              *         参数1:
              *           File:将obj对象转换为json字符串,并保存到指定的文件中
              *           Writer:将obj对象转换为json字符串,并将json数据填充到字符输出流中
              *           OutputStream:将obj对象转换为json字符串,并将json数据填充到字节输出流中
              *   writeValueAsString(obj):将对象转换为json字符串
              * */
          //将数据转换为字符串
          String json = mapper.writeValueAsString(p);
          System.out.println(json);    //{"name":"张三","age":23,"gender":"男"}
      
          //将数据写到d:a.txt文件中
          mapper.writeValue(new File("d://a.txt"),p);
      
          //将数据关联到Writer中
          mapper.writeValue(new FileWriter(new File("d://b.txt")),p);
      }	
      

      2.注解

      ​ 1.@JsonIgnore:排除属性(加上本注解的属性不进行json数据的转换)

      @JsonIgnore
      private Date birthday;
      

      ​ 2.@JsonFormat:属性值的格式化

      @JsonFormat(pattern = "yyyy-MM-dd")
      private Date birthday;
      
      @Test
      public void test2() throws Exception {
          //创建Perso对象
          Person p = new Person();
          p.setName("张三");
          p.setAge(23);
          p.setGender("男");
          p.setBirthday(new Date());
          //创建jackson核心对象
          ObjectMapper mapper = new ObjectMapper();
          String json = mapper.writeValueAsString(p);
          System.out.println(json);  //{"name":"张三","age":23,"gender":"男","birthday":"2019-10-16"}
      }
      

      3.复杂的对象转换

      ​ 1.List

      @Test
      public void test3() throws Exception {
          //创建Perso对象
          Person p1 = new Person();
          p1.setName("张三");
          p1.setAge(23);
          p1.setGender("男");
          p1.setBirthday(new Date());
      
          Person p2 = new Person();
          p2.setName("李四");
          p2.setAge(24);
          p2.setGender("男");
          p2.setBirthday(new Date());
      
          Person p3 = new Person();
          p3.setName("王五");
          p3.setAge(26);
          p3.setGender("女");
          p3.setBirthday(new Date());
      
          List<Person> list = new ArrayList<>();
          list.add(p1);
          list.add(p2);
          list.add(p3);
          //创建jackson核心对象
          ObjectMapper mapper = new ObjectMapper();
          String json = mapper.writeValueAsString(list);
          System.out.println(json); 
          //[{"name":"张三","age":23,"gender":"男","birthday":"2019-10-16"},{"name":"李四","age":24,"gender":"男","birthday":"2019-10-16"},{"name":"王五","age":26,"gender":"女","birthday":"2019-10-16"}]
      }
      

      ​ 2.Map

      @Test
      public void test4() throws Exception {
          Map<String,Object> map = new HashMap<>();
          map.put("name","张三");
          map.put("age",34);
          map.put("gender","男");
          //创建jackson核心对象
          ObjectMapper mapper = new ObjectMapper();
          String json = mapper.writeValueAsString(map);
          System.out.println(json);  //{"gender":"男","name":"张三","age":34}
      
      }
      
案例:检验用户名是否存在
服务器响应的数据,在客户端使用时,要当作json数据格式使用
  1. $.get(type):将最后一个参数tyoe指定为”json“

  2. 在服务器端设置MIME类型

    response.setContentType(“application/json;charset=utf-8”)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            /*页面加载完成后,给用户名绑定失去焦点事件*/
            $(function () {
                //给username绑定失去焦点事件
                $("#user").blur(function () {
                    //获取username文本输入框的值,发送ajax请求校验用户名是否存在
                    var username = $(this).val();
                    //发送ajax请求
                    $.get("findUserServlet",{username:username},function (data) {
                        var span = $("#s_username")
                        //响应回来的data数据(返回的是json格式数据)
                        //判断userExist键的值是否是true
                        if (data.userExist){
                            //存在
                            span.css("color","red")
                            span.html(data.msg);
                        } else {
                            //不存在
                            span.css("color","green")
                            span.html(data.msg);
                        }
                    },"json")//指定返回的数据格式为json
                })  
            })
        </script>
    </head>
    <body>
        <input type="text" id="user" name="username" placeholder="请输入用户名"/>
        <span id="s_username"></span><br/>
        <input type="password" name="password" placeholder="请输入密码"/><br/>
        <input type="submit" value="注册"/><br/>
    </body>
</html>
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名
        String username = request.getParameter("username");
        //期望服务器响应回的数据格式{"userExist":true,"msg":"用户已经存在了"}  {"userExist":false,"msg":"用户名可用"}
        Map<String,Object> map = new HashMap<>();
        if ("tom".equals(username)){
            //用户存在了
            map.put("userExist",true);
            map.put("msg","用户已经存在了");
        }else {
            //用户不存在,用户名可用
            map.put("userExist",false);
            map.put("msg","用户名可用");
        }
        //创建jackson核心对象,将map转换为json,传递给客户端
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("text/html;charset=utf-8");
        mapper.writeValue(response.getWriter(),map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值