json从入门到精通(全)

Posted 码农研究僧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json从入门到精通(全)相关的知识,希望对你有一定的参考价值。

前言

这篇文章参考了狂神对json的理解,以及融合了自已对json数据的理解做出的笔记
【狂神说Java】一小时掌握JSON

在学习这部分知识点的时候
需要了解一些知识点
前端掌握基本的ajax、jquery的框架知识,后端掌握springmvc的框架
两者结合在一起,就大概知道json格式的数据怎么传输

现在大多数的网址都是局部刷新
不刷新整个页面的情况下实现页面的局部刷新
前端实现跳转显示,但是请求都在后端实现的。最重要的一个因素就是ajax请求

  1. JavaScript从入门到精通(全)
  2. Ajax从入门到精通(全)
  3. jQuery从入门到精通(全)
  4. SpringMVC从入门到精通(全)(基于spring的一个框架,是spring的一个部件,做web的一个框架)

1. 入门知识

  • JSON 是一种轻量级的文本数据交换格式(有固定格式的字符串)
  • 服务任何语言,C、C++、Java、Objective-C、Python、Go、等。由于各个语言都支持 JSON ,JSON 又支持各种数据类型,所以JSON常用于我们日常的 HTTP 交互、数据存储等

花括号保存对象。键值对数据结构,以 “” 开始,以 “” 结束。中间包裹的为Key : Value的数据结构
方括号保存数组。数组数据结构如上图,以 “[” 开始,以 “]” 结束。Value可以为String、number、object、array、boolean(true/false),null 这几种数据类型

以上常见的json格式具体有:

  • "key":"value",最简单的JSON 格式。
  • "key1":"value1","key2":"value2",一个JSON中有多个键值对的表达方式。
  • "key":["a","b","c"],value是一个Array 的JSON格式。
  • "json":["码农","研究僧",true,1,null],value是一个数组的JSON格式,并且这个数组中有多重类型的元素,有String,Boolean,Number,null。
  • "key":"码农":"研究僧",value 是json格式。

如果上面的json数据比较凌乱,可通过json的格式化进行美化
百度直接搜json的格式化可以自动将其美化

关于json的好处:

  • 各个语言、各个框架(第三方组件)都支持JSON,复用率更高

  • 体积小、解析速度快

2. 结合javascript

JSON 是 JavaScript 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。

var obj = a: 'Hello', b: 'World'; //一个对象,键名可以使用单双引号都可
var json = '"a": "Hello", "b": "World"'; //一个 JSON 字符串,本质是一个字符串

其定义的格式
如果通过javascript中获取,格式如下:

//定义一个对象
var obj = 
	    "name": "码农研究僧",
	    "age": 22
	
//取出对象的name
alert("name:" + obj.name);
//取出对象的age。
alert("age:" + obj.age);

2.1 eval函数

如果通过json数据格式转换成JavaScript,具体如下:
通过eval函数,但是该函数是运算之后的格式,如果内容中有运算符(/、*、-、+、>>等)会出错

var txtJson = ' "star_male" : [' +
' "name":"码农" , "age":22 ,' +
' "name":"研究僧" , "age":23  ]';
 
//利用函数 eval() 转换成JSON对象
var obj = eval ("(" + txtJson + ")");
 
//输出数组的第一个对象的name值
alert("得到的值:" + obj.star_male[0].name);

2.2 parse()和stringify()函数

  • JSON字符串转换为JavaScript 对象,使用 JSON.parse()
  • JavaScript 对象转换为JSON字符串,使用 JSON.stringify() 方法
<script type="text/javascript">
   //编写一个js的对象
   var user = 
       name:"码农研究僧",
       age:22,
       sex:"男"
  ;
  
   //将js对象转换成json字符串
   var str = JSON.stringify(user);
   console.log(str);
   
   //将json字符串转换为js对象
   var user2 = JSON.parse(str);
   console.log(user2.age,user2.name,user2.sex);

</script>

3. 结合ajax

原生的JavaScript来写一个Ajax

提交JSON数据,后端要以JSON方式接收,另外前端要采用POST提交方式

前端发送给后端的json格式数据

request的请求格式具体有三个:

  • 请求方式,常用可选为 GET/POST,还有DELETE、UPDATE、OPTIONS等
  • 请求的链接,可以是相对路径和绝对路径。
  • 同步还是异步,true为异步,false为同步

发送请求可以是get和post

  • get的请求方式:request.send();
  • POST请求方式:可以传参,可以是字符型的JSON或者 ?和 &方式如下:request.send("name=码农研究僧&age=23");

ajax传递json的数据格式到服务器

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function()
    //判断返回状态是否正常
    if(request.readyState ===4 &&request.status === 200)
        //6.接收数据
        var res = request.responseText;
        //输出数据
        console.log('返回值',res);
    else
        //错误
        console.log('error');
    
;
//3.
request.open("POST","json格式编码网址",true);
//4.
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//5.发送请求.post方式如果后端接受不到参数,请把请求头改成 "Content-type","application/json"
//发送JSON数据
request.send('"name":"码农研究僧","age":23');

具体jison格式为如下:


  "Name": "码农研究僧",
  "Info": "测试json"

服务器接收到json的数据格式厚,回显到前端服务器显示出来

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function()
    //判断返回状态是否正常
    if(request.readyState ===4 &&request.status === 200)
        //6.接收数据
        var res = request.responseText;
        //输出数据
        console.log('返回值',res);

        /**
         * 如果返回来的参数是JSON,就可以直接转换。
         */
        var json = JSON.parse(res);
        console.log('Name:',json.Name);
        console.log('Info:',json.Info);
    else
        console.log('error');
    
;

request.open("GET","json格式编码网址",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//5.发送请求GET请求方式:request.send();
request.send();                          

4. 结合jquery

jQuery是对JavaScript的封装的产物,丰富的选择器,优雅的Ajax写法。一个是jQuery的选择器,另外一个就是ajax的封装了

jQuery的常用参数:

名称类型规则说明
urlstring请求连接,可以是相对路径或者是绝对路径。
cacheBoolean是否缓存,默认true,false为不缓存。
typestring请求方式,get、post、put、delete、update、option。
dataString/JSON请求的参数,可以是&拼接的方式或者JSON对象提交方式
dataTypestring预期返回的类型,可选值有,json、xml、html、script、jsonp、text
successFunction成功回调的方法。
errorFunction失败调用的方法。

具体jison格式为如下:


  "Name": "码农研究僧",
  "Info": "测试json"

$.ajax(
    url:"json数据的网址",
    type:"get",
    data:"name":"码农研究僧","age":22,
    dataType:'json',
    success:function (json) 
        console.log('Name:',json.Name);
        console.log('Info:',json.Info);
    ,
    error:function (e) 
        //错误信息
        console.log(e.message);
    
);

通过jQuery$.get$.post$.getJSON

$.get("json数据的网址",
    "name":"码农研究僧","age":22, //没有参数的时候,直接省略或者以直接写null/
    function (json) 
        console.log('Name:',json.Name);
        console.log('Info:',json.Info);
    ,
    'json' //只有get post的时候需要,其他getJSON可以省略,默认就是json
);

5. 结合springmvc

json解析工具:Jackson
导入它的jar包

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.13.1</version>
</dependency>

还有springmvc的配置文件
主要配置其视图解析器、中文字符编码过滤器以及web配置网页

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
        version="4.0">

   <!--1.注册servlet-->
   <servlet>
       <servlet-name>SpringMVC</servlet-name>
       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
       <!--通过初始化参数指定SpringMVC配置文件的位置,进行关联-->
       <init-param>
           <param-name>contextConfigLocation</param-name>
           <param-value>classpath:springmvc-servlet.xml</param-value>
       </init-param>
       <!-- 启动顺序,数字越小,启动越早 -->
       <load-on-startup>1</load-on-startup>
   </servlet>

   <!--所有请求都会被springmvc拦截 -->
   <servlet-mapping>
       <servlet-name>SpringMVC</servlet-name>
       <url-pattern>/</url-pattern>
   </servlet-mapping>

   <filter>
       <filter-name>encoding</filter-name>
       <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
       <init-param>
           <param-name>encoding</param-name>
           <param-value>utf-8</param-value>
       </init-param>
   </filter>
   <filter-mapping>
       <filter-name>encoding</filter-name>
       <url-pattern>/</url-pattern>
   </filter-mapping>

</web-app>
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:context="http://www.springframework.org/schema/context"
      xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

   <!-- 自动扫描指定的包,下面所有注解类交给IOC容器管理 -->
   <context:component-scan base-package="com.controller"/>

   <!-- 视图解析器 -->
   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
         id="internalResourceViewResolver">
       <!-- 前缀 -->
       <property name="prefix" value="/WEB-INF/jsp/" />
       <!-- 后缀 -->
       <property name="suffix" value=".jsp" />
   </bean>

</beans>

为了测试json的数据格式
还需要一个实体类,主要为了传一些参数进去

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

//需要导入lombok
@Data //帮助实现get和set的一些参数
@AllArgsConstructor //全参
@NoArgsConstructor //空参
public class User 

   private String name;
   private int age;
   private String sex;
   

界面层的代码模块具体如下:
@ResponseBody 将服务器返回的对象转换为json对象响应回去
@RestController=@ResponseBody+@Controller

@Controller //
public class UserController 

   @RequestMapping("/json1")
   @ResponseBody
   public String json1() throws JsonProcessingException 
       //创建一个jackson的对象映射器,用来解析数据
       ObjectMapper mapper = new ObjectMapper();
       //创建一个对象
       User user = new User("码农研究僧", 22, "男");
       //将我们的对象解析成为json格式
       String str = mapper.writeValueAsString(user);
       //由于@ResponseBody注解,这里会将str转成json格式返
       return str;
  


这样会出现乱码,解决乱码的问题有很多种方法,一种是直接添加参数修改,一种是在配置文件修改

  • 第一种方法:@RequestMapping(value = "/json1",produces = "application/json;charset=utf-8"),produces:指定响应体返回类型和编码
  • 第二种方法添加utf-8过滤器
<mvc:annotation-driven>
   <mvc:message-converters register-defaults="true">
       <bean class="org.springframework.http.converter.StringHttpMessageConverter">
           <constructor-arg value="UTF-8"/>
       </bean>
       <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
           <property name="objectMapper">
               <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                   <property name="failOnEmptyBeans" value="false"/>
               </bean>
           </property>
       </bean>
   </mvc:message-converters>
</mvc:annotation-driven>

还有一点。类上直接使用 @RestController,就不用在每个方法中都添加这个注@ResponseBody

补充一下如果输出时间的json的格式化

如果不外加时间戳的方式,输出就是默认输出时间戳的形式

@RequestMapping("/json4")
public String json4() throws JsonProcessingException 

   ObjectMapper mapper = new ObjectMapper();

   //不使用时间戳的方式
   mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
   //自定义日期格式对象
   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
   //指定日期格式
   mapper.setDateFormat(sdf);

   Date date = new Date();
   String str = mapper.writeValueAsString(date);

   return str;

以上是关于json从入门到精通(全)的主要内容,如果未能解决你的问题,请参考以下文章

2021最新Java学科全阶段视频教程(从入门到精通)

ROS从入门到精通系列(十八)-ROS TF(中)TF 消息全解析

ROS从入门到精通系列(十八)-ROS TF(中)TF 消息全解析

牛逼!Java 从入门到精通,超全汇总版

牛逼!Java 从入门到精通,超全汇总版

牛逼!Java 从入门到精通,超全汇总版