15- JSON and AJAX

其他 2021-03-05 02:30:18 阅读次数: 0

7- JSON

7.1 JSON基础

7.1.1 JSON 概念

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示。

- 对象表示为键值对，数据由逗号分隔。
- 花括号保存对象
- 方括号保存数组

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

<script type="text/javascript">
    // 1.编写一个JS对象
    var user = {
    
    
        name: "guardwhy",
        age: 26,
        sex: "男"
    };

    // 2.将js对象转换成JSON对象
    var json = JSON.stringify(user);
    console.log(json);

    // 输出结果
    console.log("======");

    // 3.将JSON对象转换成JavaScript对象
    var obj = JSON.parse(json);
    console.log(obj);
</script>

7.1.2 JSON 和 JS 区别

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

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

7.1.3 JSON 和 JS互转

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

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

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

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

7.2 项目实现

7.2.1 项目目录

​

7.2.2 相关依赖

<!--导入JSON包-->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.11.3</version>
</dependency>

<!--导入fastjson-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.74</version>
</dependency>

<!--导入lombok-->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.16</version>
</dependency>

7.2.3 配置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.注册DispatcherServlet-->
    <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.xml</param-value>
        </init-param>
        <!--启动级别-1-->
        <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>characterEncodingFilter</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>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

7.2.4 配置springmvc.xml

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

    <!--1.自动扫描包,让指定包下的注解生效,由IOC容器统一管理-->
    <context:component-scan base-package="cn.guardwhy"/>

    <!--2.让Spring MVC处理静态资源-->
    <mvc:default-servlet-handler/>

    <!--3.支持mvc注解驱动-->
    <mvc:annotation-driven>
        <!--JSON格式乱码处理方式-->
        <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>
    <!--4.视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="InternalResourceViewResolver">
        <!--前缀-->
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <!--后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

7.2.5 持久层

  • User类
package cn.guardwhy.domain;

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

//需要导入lombok
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    
    
    private String name; // 用户name
    private int age; // 用户年龄
    private String sex; // 性别
}

7.2.6 控制层(Controller)

// @Controller
@RestController // 不走视图解析器
public class UserController {
    
    
    /***
     * 返回JSON字符串
     * @return
     */
    @RequestMapping("/json1")
    @ResponseBody   // 该注解不会走视图解析器,会直接返回一个字符串
    public String json1() throws JsonProcessingException {
    
    
        ObjectMapper mapper = new ObjectMapper();
        // 1.创建一个user对象
        User user = new User("guardwhy", 26, "男");
        //2. 将Java对象转换为json字符串
        String str = mapper.writeValueAsString(user);
        // 3.返回JSON字符串
        return str;
  }
}

执行结果

​

7.2.7 工具类

package cn.guardwhy.utils;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

import java.text.SimpleDateFormat;

/**
 * JSON工具类
 */
public class JsonUtils {
    
    

    public static String getJson(Object object){
    
    
        return getJson(object, "yyyy-MM-dd HH:mm:ss");
    }

    public static String getJson(Object object, String dateFormat){
    
    
        // 1.创建mapper对象
        ObjectMapper mapper = new ObjectMapper();
        // 2.不使用时间差方式
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
        // 3.定义自定义日期格式对象
        SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
        // 4.指定日期格式
        mapper.setDateFormat(sdf);

        try {
    
    
            // 5.返回该值
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
    
    
            e.printStackTrace();
        }

        return null;
    }
}

7.2.8 集合输出(JOSN)

/***
 * 集合输出
 * @return
 * @throws JsonProcessingException
*/
@RequestMapping("/json2")
@ResponseBody
public String json2() throws JsonProcessingException {
    
    
    // 1.创建list集合
    List<User> list1 = new ArrayList<>();
    // 2.给User对象添加属性
    User user1 = new User("kobe", 41, "男");
    User user2 = new User("James", 35, "男");
    User user3 = new User("Curry", 10, "男");
    // 3.将对象添加到集合中
    list1.add(user1);
    list1.add(user2);
    list1.add(user3);

    // 4.返回集合
    return new ObjectMapper().writeValueAsString(list1);
}

执行结果：

​

7.2.9 输出时间对象

 /***
 * 输出时间对象
 * @return
 * @throws JsonProcessingException
 */
 @RequestMapping("/json3")
 @ResponseBody
 public String json3() throws JsonProcessingException {
    
    
     // 1.创建时间对象
     Date date = new Date();
     // 2.得到json时间对象
     String json = JsonUtils.getJson(date);
     // 3.返回JSON时间对象
     return json;
 }

执行结果：

​

7.3 FastJson

fastjson.jar是阿里开发的一款专门用于Java开发的包，可以方便的实现json对象与JavaBean对象的转换，实现JavaBean对象与json字符串的转换，实现json对象与json字符串的转换。

7.3.1 fastjson主要的类

JSONObject 代表 json 对象

  • JSONObject实现了Map接口, 猜想 JSONObject底层操作是由Map实现的。
  • JSONObject对应json对象，通过各种形式的get()方法可以获取json对象中的数据，也可利用诸如size()，isEmpty()等方法获取"键：值"对的个数和判断是否为空。
  • 其本质是通过实现Map接口并调用接口中的方法完成的。

JSONArray 代表 json 对象数组

  • 内部是有List接口中的方法来完成操作的。

JSON 代表 JSONObject和JSONArray的转化

JSON类源码分析与使用。
仔细观察这些方法，主要是实现json对象，json对象数组，javabean对象，json字符串之间的相互转化。

7.3.2 FastJson(Controller)

/***
* fastjson
* @return
* @throws JsonProcessingException
*/
@RequestMapping("/json4")
@ResponseBody
public String json4() throws JsonProcessingException {
    
    
    // 1.创建list2集合
    List<User> list2 = new ArrayList<>();
    // 2.给User对象添加属性
    User user1 = new User("kobe", 41, "男");
    User user2 = new User("yaoMing", 42, "男");
    User user3 = new User("Curry", 10, "男");
    // 3.将对象添加到集合中
    list2.add(user1);
    list2.add(user2);
    list2.add(user3);
    // 4.将集合对象转成JSON字符串
    String str = JSON.toJSONString(list2);

    // return "str";

    System.out.println("*******Java对象 转 JSON字符串*******");
    String str1 = JSON.toJSONString(list2);
    System.out.println("JSON.toJSONString(list)==>"+str1);
    String str2 = JSON.toJSONString(user1);
    System.out.println("JSON.toJSONString(user1)==>"+str2);

    System.out.println("\n****** JSON字符串 转 Java对象*******");
    User jp_user1=JSON.parseObject(str2,User.class);
    System.out.println("JSON.parseObject(str2,User.class)==>"+jp_user1);

    System.out.println("\n****** Java对象 转 JSON对象 ******");
    JSONObject jsonObject1 = (JSONObject) JSON.toJSON(user2);
    System.out.println("(JSONObject) JSON.toJSON(user2)==>"+jsonObject1.getString("name"));

    System.out.println("\n****** JSON对象 转 Java对象 ******");
    User to_java_user = JSON.toJavaObject(jsonObject1, User.class);
    System.out.println("JSON.toJavaObject(jsonObject1, User.class)==>"+to_java_user);

    return "success";
    }
}

执行结果

​

8-Ajax

8.1 什么是ajax

异步JavaScript和XML (Asynchronous Javascript And XML)

特点：

1、异步的访问方式。

2、使用到的技术：JavaScript和XML

  • JavaScript：用于后台请求的发送和响应数据的接收，(以前提交表单或在浏览器上输入地址)。
  • XML：用于封装服务器发送的大量的数据，因为XML无关的数据太多，而且解析比较麻烦。所以目前几乎不再使用了，使用JSON格式来代替。

8.2 同步和异步的区别

同步方式：浏览器与服务器是串行的操作，浏览器发工作的时候，服务器没有处理数据的。服务器在工作的时候，浏览器只能等待。以前使用JSP开发的方式都是同步的方式。

缺点：执行效率低，用户体验差。

异步方式：以后逐渐会使用异步的开发，浏览器与服务器是并行工作的。

优点：执行效率高，用户体验更好。

很大企业开发中，是同步和异步并存的方式。

8.3 Ajax项目

8.3.1 项目目录

​

8.3.2 配置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.注册DispatcherServlet-->
    <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.xml</param-value>
        </init-param>
        <!--启动级别-1-->
        <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>characterEncodingFilter</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>characterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

8.3.3 配置springMVC.xml

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

    <!--1.自动扫描包,让指定包下的注解生效,由IOC容器统一管理-->
    <context:component-scan base-package="cn.guardwhy"/>

    <!--2.让Spring MVC处理静态资源-->
    <mvc:default-servlet-handler/>
    
    <!--3.支持mvc注解驱动-->
    <mvc:annotation-driven>
        <!--JSON格式乱码处理方式-->
        <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>

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

</beans>

8.3.4 控制器(Controller)

@RestController
public class AjaxController {
    
    
    /***
     * 判断用户名是否存在
     * @param name
     * @param response
     * @throws IOException
     */
    @RequestMapping("/ajax1")
    public void ajax1(String name, HttpServletResponse response) throws IOException {
    
    
        // 1.条件判断
        if("guardwhy".equals(name)){
    
    
            response.getWriter().print("true");
        }else {
    
    
            response.getWriter().print("false");
        }
    }

8.3.5 视图层

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>AJAX技术</title>
    <%--引入jquery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>

    <script type="text/javascript">
        function ajax1(){
          $.post({
            url:"${pageContext.request.contextPath}/ajax1",
            data:{'name':$("#username").val()},
            success: function (data, status){
              console.log(data);
              console.log(status);
            }
          });
        }
    </script>
  </head>
  <body>
      <%--onblur:失去焦点触发事件--%>
      用户名:<input type="text" id="username" οnblur="ajax1()"/>
  </body>
</html>

执行结果

​

8.3.6 控制器(Controller)

/***
* 返回集合数据
* @return
*/
@RequestMapping("/ajax2")
public List<User> ajax2() {
    
    
    // 1.创建list集合
    List<User> list = new ArrayList<User>();
    // 2.将对象添加到集合中
    list.add(new User("kobe", 41, "男"));
    list.add(new User("James", 35, "男"));
    list.add(new User("Curry", 10, "男"));

    // 3.将集合转换成JSON格式返回
    return list;
}

8.3.7 视图层

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>异步请求获取集合元素</title>
</head>
<body>
    <input type="button" id="btn" value="获取集合数据"/>
    <table width="100%" align="center">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>

        <tbody id="content"></tbody>
    </table>

    <%--引入jquery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>

    <script type="text/javascript">
       $(function (){
           $("#btn").click(function (){
               $.post("${pageContext.request.contextPath}/ajax2", function (data){
                   console.log(data);
                   let html= "";
                   for (let i = 0; i < data.length; i++) {
                       html += "<tr>" +
                           "<td>" + data[i].name + "</td>" +
                           "<td>" + data[i].age + "</td>" +
                           "<td>" + data[i].sex + "</td>" +
                           "</tr>"
                   }
                   $("#content").html(html);
               });
           })
       })
    </script>
</body>
</html>

执行结果

8.3.8 控制器(Controller)

/***
* 用户名密码是否正确案例
* @param name
* @param pwd
* @return
*/
@RequestMapping("/ajax3")
public String ajax3(String name, String pwd){
    
    
    // 1.定义str字符串
    String str = "";
    // 2.判断用户名是否正确
    if(name != null){
    
    
       if("guardwhy".equals(name)){
    
    
           str = "ok";
        }else {
    
    
           str = "用户名错误";
          }
     }
    // 3.判断密码是否正确
    if(pwd != null){
    
    
        if("123".equals(pwd)){
    
    
            str = "ok";
         }else {
    
    
              str = "密码错误";
         }
      }

   // 4.将str转换成JSON格式返回
  return str;
}

8.3.9 视图层

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户名和密码判断</title>
    <%--引入Jquery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        function fun1(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax3",
                data:{'name':$("#name").val()},
                success:function (data){
                    if(data.toString()=='ok'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }

        function fun2(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax3",
                data:{'pwd':$("#pwd").val()},
                success:function (data){
                    if(data.toString()=='ok'){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }
    </script>
</head>
<body>
    <p>
        用户名:<input type="text" id="name" οnblur="fun1()">
        <span id="userInfo"></span>
    </p>
    <p>
        密码:<input type="text" id="pwd" οnblur="fun2()">
        <span id="pwdInfo"></span>
    </p>
</body>
</html>

执行结果

猜你喜欢

转载自blog.csdn.net/hxy1625309592/article/details/113586522
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022