14.json技术

原创已于 2023-04-17 23:05:31 修改 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #前端

于 2022-08-19 16:22:40 首次发布

web技术专栏收录该内容

59 篇文章

订阅专栏

本文详细介绍了JSON的基本知识点，包括定义、获取值、遍历语法，以及如何在Java中将JSON转化为Java对象和反之。示例展示了用户注册时的用户名验证过程，使用AJAX发送请求，并在后端使用Servlet处理JSON响应。同时，文章通过实例演示了JSON数据结构的定义、遍历以及对象与数组的嵌套。此外，还提供了JSON字符串与Java对象之间的转换方法。

一、json知识点总览。

<script>
  $(function () {
    //给username绑定blur事件
    $("#username").blur(function () {
      //获取username文本输入框的值
      let username = $(this).val();
      let reg = new RegExp("^\\w{3,8}$");
      if (reg.test(this.value)){
        $("#error_usernameformat").text("");
      }else {
        $("#error_usernameformat").text("用户名格式错误，请重新输入！");
        return;
      }
      //发送ajax请求,期望服务器响应回来的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
      //   {"userExsit":false,"msg":"用户名可用"}
        $.post("/findUserServlet",{"username":username},function (data) {
            //判断userExsit键的值是否是true
            var span = $("#error_usernameformat");
            if (data.userExsit){
                //用户名存在
                span.css("color","red");
                span.text(data.msg);
            }else {
                //用户名不存在
                span.css("color","green");
                span.text(data.msg);
            }
        },"json");//指定返回类型是json类型（alert(data);弹出的是object对象），默认文本类型（弹出的是文本字符串），这里是重点
    });
  });
</script>
  <form>
    <input id="username" type="text" name="username" placeholder="请输入用户名">
      <span id="error_usernameformat"></span>
      <br/>
    <input type="text" name="password" placeholder="请输入密码"><br/>
    <input type="submit" value="注册">
  </form>

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        request.setCharacterEncoding("utf-8");
//        response.setCharacterEncoding("utf8");
        response.setContentType("text/html;charset=utf-8");
        //设置的响应格式为JSON类型,重点（js类名不设置，可以在这里设置返回数据类型，否则为文本类型）
//        response.setContentType("application/json;charset=utf8");
        //1.获取用户名参数
        String username = request.getParameter("username");
        Map map = new HashMap<String,Object>();
        //2.调用service层判断用户名是否存在
        /*期望服务器响应回来的数据格式：
                                {"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
                                {"userExsit":false,"msg":"用户名可用"}*/
        if ("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户名太受欢迎，请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }
        //将map转为json，并且传递给客户端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

二、json定义和获取值的语法。

<script>
  //1.定义基本格式,这里的语法和JavaScript的自定义对象一样。
  var person = {"name":"张三",age:23,'gender':true};
  //获取name的值
  // let name = person.name;
  let name = person['name'];
  alert(name);
  //2.嵌套格式{}————>[] 对象嵌套数组对象
  var persons = {"persons":[
          {"name":"张三","age":23,"gender":true},
          {"name":"张三","age":23,"gender":true},
          {"name":"张三","age":23,"gender":true}
    ]
  };
  //获取值
  let name2 = persons.persons[0].name;
  //3.嵌套格式[]————>{} 数组对象嵌套对象
  var ps = [{"name":"张三","age":23,"gender":true},
            {"name":"张三","age":23,"gender":true},
            {"name":"张三","age":23,"gender":true}
  ];
  //获取数组的值
  let name1 = ps[0].name;
  alert(name1);
</script>

三、json遍历语法。

返回的是一个js数组，js数组里面是json对象。

可以这样遍历（this是每个json对象）：$(data).each(function () {}

<script>
  $(function () {
    //发送ajax请求，加载所有省份数据
    $.get("/provinceServlet",{},function (data) {
        //1.获取select
        let select = $("#province");
        //2.遍历json数组
        $(data).each(function () {
            //3.创建<option>标签
            // var option = "<option name='"+index+"'>"+element.name+"</option>";
            var option = "<option name='"+this.id+"'>"+this.name+"</option>";
            //4.调用select的append追加option
            select.append(option);
        })
    });
  })
</script>
<select id="province">
  <option>--请选择省份--</option>
</select>

<script>
  var person = {"name":"张三",age:23,'gender':true};
  var ps = [{"name":"张三","age":23,"gender":true},
            {"name":"张三","age":23,"gender":true},
            {"name":"张三","age":23,"gender":true}
  ];
  //获取person所有的键和值
  //for in 循环
  for (var key in person) {
      //这样的方式是获取不到的，因为相当于 person."name"(java里面用的是   对象.变量)
      // alert(key + ":" + person.key);
      alert(key + ":" + person[key]);
  }
  //获取ps中的所有值
  for (var i = 0; i < ps.length; i++) {
      var p = ps[i];
      for (var key in p) {
          alert(key+":"+p[key]);
      }
  }
</script>

四、JSON转为java对象：

 //json字符串转为java对象
    @Test
    public void test4() throws Exception {
        //初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":\"23\"}";
        //2.创建ObjectMapper对象
        ObjectMapper mapper = new ObjectMapper();
        //3.转换为java对象Person对象
        Person person = mapper.readValue(json, Person.class);
        System.out.println(person);//Person{name='张三', age=23, gender='男', birthday=null}
    }

五、java对象转换JSON：

public class JacksonTest {
    //java对象转为json字符串
    @Test
    public void test1() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        //2.创建jackson的核心对象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3.转换
        /**
         *  转换方法：
         *          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":"男"}
        //将数据写到i://c.txt
//        mapper.writeValue(new File("i://c.txt"),p);
        //将数据写到字符输出流中
        mapper.writeValue(new FileWriter("I://d.txt"),p);
        //将数据写到字节输出流中
        mapper.writeValue(new FileOutputStream("I://e.txt"),p);
    }

    @Test
    public void test2() throws Exception {
        //1.创建Person对象
        Person p = new Person();
        p.setName("张三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("张三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("张三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());

        //创建list集合
        List ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);
        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        System.out.println(json);//[{"name":"张三","age":23,"birthday":1660895275177,"gender":"男"},{"name":"张三","age":23,"birthday":1660895275177,"gender":"男"},{"name":"张三","age":23,"birthday":1660895275177,"gender":"男"}]
    }
    @Test
    public void test3() throws Exception {
        //创建map集合
        Map map = new HashMap<String,Object>();
        map.put("name","张三");
        map.put("age","23");
        map.put("gendar","男");
        //2.转换
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        System.out.println(json);//{"gendar":"男","name":"张三","age":"23"}

    }
}