标签：对象 JavaScript JSON 学习 Json var World Hello

Json 入门

参考资料

笔记教程

视频教程

JSON 定义

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JavaScript 语言中，一切都是对象。因此，任何 JavaScript 支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。看看他的要求和语法格式：

对象表示为键值对，数据由逗号分隔（最后一个数据不用逗号！）
花括号保存对象
方括号保存数组

JSON 键值对是用来保存 JavaScript 对象的一种方式，和 JavaScript 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：

形式如下

{"name": "QinJiang"}
{"age": "3"}
{"sex": "男"}

JSON 和 JavaScript 对象的关系

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

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON 和 JavaScript 对象互转

要实现从 JSON 字符串转换为 JavaScript 对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

要实现从 JavaScript 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'

做个 html 小测试

新建项目

1671175366025

1671175420669

1671175440177

得到：

1671175555055

在 webapp 目录下键个 json1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    //编写一个js对象
    var user = {
        name:"小明",
        age:3,
        sex:"男"
    };
    //将js对象转换成json字符串 例如： var json = JSON.stringify({a: 'Hello', b: 'World'});
    var jsonUser = JSON.stringify(user);
    console.log(jsonUser);

    //将json字符串转换成为js对象 例如:var obj = JSON.parse('{"a": "Hello", "b": "World"}');
    var jsUser = JSON.parse(jsonUser);

    console.log(jsUser);//整个对象输出
    console.log(jsUser.name,jsUser.age,jsUser.sex);//属性单独输出


</script>
</html>

结果：

1671178982816

Controller 返回 JSON 数据

配置 json 解析工具

Jackson

应该是目前比较好的 json 解析工具了

当然工具不止这一个，比如还有阿里巴巴的 fastjson 等等。

我们这里使用 Jackson，使用它需要在 pom.xml 文件中导入它的 jar 包；

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

配置 SpringMVC 需要的配置

web.xml

<?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>

发现问题。idea 爆红！

推测是因为 springmvc 那些没有配置起来，所以不能直接复制粘贴。

继续探索

1671180203264

<!-- https://mvnrepository.com/artifact/org.jsondoc/jsondoc-springmvc -->
<dependency>
    <groupId>org.jsondoc</groupId>
    <artifactId>jsondoc-springmvc</artifactId>
    <version>1.2.22</version>
</dependency>

探索失败，自己去补一补 springMVC 的配置

（结果发现这个东西还是比较多的，现在暂时还不想补，如果想补的话就去这个视频）

补 springMVC 知识

springmvc-servlet.xml

<?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.kuang.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>

白那些一个 User 实体类，测试 Controller（不需要去连接数据库哦）

标签：对象,JavaScript,JSON,学习,Json,var,World,Hello
From： https://www.cnblogs.com/Lovi/p/17717496.html

Json学习

Json 入门

参考资料

JSON 定义

JSON 和 JavaScript 对象的关系

Controller 返回 JSON 数据

相关文章

赞助商

阅读排行