json从入门到精通（全）

前言

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

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

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

JavaScript从入门到精通（全）
Ajax从入门到精通（全）
jQuery从入门到精通（全）
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}//取出对象的namealert("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() 方法

<scripttype="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 =newXMLHttpRequest();//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 =newXMLHttpRequest();//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、textsuccessFunction成功回调的方法。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-appxmlns="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"?><beansxmlns="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-scanbase-package="com.controller"/><!-- 视图解析器 --><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"id="internalResourceViewResolver"><!-- 前缀 --><propertyname="prefix"value="/WEB-INF/jsp/"/><!-- 后缀 --><propertyname="suffix"value=".jsp"/></bean></beans>

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

importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;//需要导入lombok@Data//帮助实现get和set的一些参数@AllArgsConstructor//全参@NoArgsConstructor//空参publicclassUser{privateString name;privateint age;privateString sex;}

界面层的代码模块具体如下：

@ResponseBody

将服务器返回的对象转换为json对象响应回去

@RestController

@ResponseBody

```
@Controller
```

@Controller//publicclassUserController{@RequestMapping("/json1")@ResponseBodypublicStringjson1()throwsJsonProcessingException{//创建一个jackson的对象映射器，用来解析数据ObjectMapper mapper =newObjectMapper();//创建一个对象User user =newUser("码农研究僧",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-convertersregister-defaults="true"><beanclass="org.springframework.http.converter.StringHttpMessageConverter"><constructor-argvalue="UTF-8"/></bean><beanclass="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><propertyname="objectMapper"><beanclass="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean"><propertyname="failOnEmptyBeans"value="false"/></bean></property></bean></mvc:message-converters></mvc:annotation-driven>

还有一点。类上直接使用

@RestController

，就不用在每个方法中都添加这个注

@ResponseBody

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

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

@RequestMapping("/json4")publicStringjson4()throwsJsonProcessingException{ObjectMapper mapper =newObjectMapper();//不使用时间戳的方式
   mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);//自定义日期格式对象SimpleDateFormat sdf =newSimpleDateFormat("yyyy-MM-dd HH:mm:ss");//指定日期格式
   mapper.setDateFormat(sdf);Date date =newDate();String str = mapper.writeValueAsString(date);return str;}

标签： json javascript ajax

本文转载自: https://blog.csdn.net/weixin_47872288/article/details/122391321
版权归原作者 码农研究僧 所有，如有侵权，请联系我们删除。

json从入门到精通（全）

目录

前言

1. 入门知识

2. 结合JavaScript

2.1 eval函数

2.2 parse()和stringify()函数

3. 结合ajax

4. 结合jquery

5. 结合springmvc

发表评论

“json从入门到精通（全）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航