Java-SpringMVC学习（三）----JSON、Ajax

最新推荐文章于 2024-06-07 19:10:54 发布

苹果和狗

最新推荐文章于 2024-06-07 19:10:54 发布

阅读量133

点赞数

分类专栏： JavaEE

本文链接：https://blog.csdn.net/weixin_44824745/article/details/99643888

版权

JavaEE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

JSON
AJAX

JSON

概述

什么是JSON？

JavaScript Object Notation(JavaScript 对象表示法)
是存储和交换文本信息的语法，类似 XML。
是轻量级的文本数据交换格式
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

JSON语法规则

在 JS 语言中，一切皆对象。因此，任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。

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

例如：

数据：

"name" : "苹果"
 等价于：
 name = "苹果"

对象：

var obj, n;
myObj = { "name":"苹果", "amount":67, "locality":null };
n= obj.name;

数组：

"species":[ "apple", "orange", "pear","watermelon" ]

JSON和XML的异同点

JSON和XML的可读性不相上下，JSON有简易的语法而XML是规范的标签形式
它们都有很好的扩展性，但是JSON可以存储Javascript复合对象
服务器端和客户端需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护。JSON则易于解析，它能够使用内建的 JavaScript eval() 方法进行解析
XML文件格式复杂，而JSON的数据格式比较简单易于读写，读写速度更快。不过JSON对数据的描述性比XML较差。

JSON字符串与JS对象的互相转换

从JSON字符串转换为JS对象，使用 JSON.parse() 方法:

var obj = JSON.parse('{ "name":"苹果", "amount":67, "locality":null }');
//结果：{name: '苹果',amount: '67'，locality：'null'}

从JS对象转换为JSON字符串，使用 JSON.stringify() 方法:

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

代码实例

【一些知识点】

有很多jar包都可以解析JSON，常见的Json类库有Gson、JSON-lib和Jackson等
Jackson相对比较高效，我们这里使用Jackson进行JSON和Java对象转换
ObjectMapper是JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现。
ObjectMapper中的一些方法：
- writeValue(File file, Object o)把o转成json序列，并保存到file文件中。
- writeValue(OutputStream file, Object o)把o转成json序列，并保存到file输出流中。
- writeValueAsBytes(Object o)把o转成json序列，并把结果输出成字节数组。
- writeValueAsString(Object o)把o转成json序列，并把结果输出成字符串。
@ResponseBody:

该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。通常用来返回JSON数据或者是XML

实现：

1.创建一个maven项目，导入jackson的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>

2.写一个实体类（随意），编写Controller测试类，如下：

package com.sehun.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.sehun.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


@Controller
public class UserController {

    //对象Object
    @RequestMapping("/j1")
    //我们正常的返回会走视图解析器，而JSON需要返回的是一个字符串
    /*
       有很多jar包都可以解析JSON，常见的Json类库有Gson、JSON-lib和Jackson等
       Jackson相对比较高效，我们这里使用Jackson进行JSON和Java对象转换
    */
    //@ResponseBody--该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，
    // 写入到Response对象的body数据区。通常用来返回JSON数据或者是XML
    @ResponseBody
    public String json1() throws JsonProcessingException {
        //ObjectMapper类是Jackson库的主要类。
        //它提供一些功能将转换成Java对象匹配JSON结构.Jackson的所有JSON操作都是在ObjectMapper中实现
        ObjectMapper mapper = new ObjectMapper();
        User user = new User("小苹果", 4, "女");
        //将java对象转为json字符串
        String jstr = mapper.writeValueAsString(user);
        System.out.println(jstr);
        return jstr;
    }
    
    //集合List
    @RequestMapping(value = "/j2")
    @ResponseBody
    public String json3() throws JsonProcessingException {

        List<User> list = new ArrayList<>();

        User user1 = new User("a",15,"男");
        User user2 = new User("b",16,"女");
        User user3 = new User("c",71,"男");
        list.add(user1);
        list.add(user2);
        list.add(user3);

        return new ObjectMapper().writeValueAsString(list);
    }

    //时间Data
    @RequestMapping(value = "/j3")
    @ResponseBody
    public String json5() 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();
        return mapper.writeValueAsString(date);
    }
    
    
}

3.编写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
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 自动扫描包，让指定包下的注解生效,由IOC容器统一管理 -->
    <context:component-scan base-package="com.sehun.controller"/>
    <!-- 让Spring MVC不处理静态资源 -->
    <mvc:default-servlet-handler/>
    <!-- 持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>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>


</beans>

4.编写Web.xml文件

<servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <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>

  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

5.配置tomcat运行
在这里插入图片描述

AJAX

概述

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

JQuery Ajax

XMLHttpRequest 是 AJAX 的基础。但是编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着我们必须编写额外的代码对浏览器进行测试。

所以我们直接用JQuery给我们提供的实现Ajax方法。（jQuery Ajax本质就是 XMLHttpRequest）

jQuery 中关于Ajax的一些方法：

1. jQuery.get(...)
       所有参数：
              url: 待载入页面的URL地址
             data: 待发送 Key/value 参数。
          success: 载入成功时回调函数。
         dataType: 返回内容格式，xml, json,  script, text, html

2.jQuery.post(...)
       参数：url、data、success、dataType          

3.jQuery.getJSON(...)
       参数：url、data、success
            
4.jQuery.getScript(...)
       参数：url、data、success

5.jQuery.ajax(...)
       部分参数：
              url：请求地址
             type：请求方式，GET、POST（1.9.0之后用method）
          headers：请求头
             data：要发送的数据
      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
            async：是否异步
          timeout：设置请求超时时间（毫秒）
       beforeSend：发送请求前执行的函数(全局)
         complete：完成之后执行的回调函数(全局)
          success：成功之后执行的回调函数(全局)
            error：失败之后执行的回调函数(全局)
          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
         dataType：将服务器端返回的数据转换成指定类型
            "xml": 将服务器端返回的内容转换成xml格式
           "text": 将服务器端返回的内容转换成普通文本格式
           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
           "json": 将服务器端返回的内容转换成相应的JavaScript对象
          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

代码实例

1.简单测试（HttpServletResponse实现）

先写一个Ajax的controller

package com.sehun.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/ajax")
public class AjaxController {

    @RequestMapping("/a")
    @ResponseBody
    public String ajax3(String name,String pwd){
        String msg = "";
        if (name!=null){
            if ("sehun".equals(name)){
                msg = "ok";
            }else {
                msg = "用户名有误";
            }
        }
        return msg;
    }

}

编写index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
        
        function test(){
            //ajax默认是get请求
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a",
                data:{'name':$("#tN").val()},
                success:function (data,status) {
                    console.log(data);
                    console.log(status);
                }
            });
        }


    </script>
</head>
<body>
<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="tN" οnblur="test()"/> <br>
</body>

测试结果：

在用户名那里输入，一旦鼠标离开，输入框失去焦点，就会Console输出。
在这里插入图片描述

2.简单测试（SpringMVC实现）

编写controller

@RequestMapping("/mvc")
    //@ResponseBody注解，将list转成json格式返回
    @ResponseBody
    public List<User> ajax2(){
        List<User> list = new ArrayList<User>();
        list.add(new User("百香果",18,"女"));
        list.add(new User("巴西龟",85,"男"));
        list.add(new User("菠萝",3,"男"));
        return list;
    }

编写前端

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
    </tbody>
</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
<script>

    $(function () {
        $("#btn").click(function () {
            $.post("${pageContext.request.contextPath}/ajax/mvc",function (data) {
                console.log(data)
                var html="";
                for (var 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>

运行结果
在这里插入图片描述

3.简单测试

编写controller

@RequestMapping("/ha")
    @ResponseBody
    public String ajax3(String name,String pwd){
        String msg = "";
        //模拟数据库中存在数据
        if (name!=null){
            if ("sehun".equals(name)){
                msg = "OK";
            }else {
                msg = "用户名输入错误";
            }
        }
        if (pwd!=null){
            if ("777".equals(pwd)){
                msg = "OK";
            }else {
                msg = "密码输入错误";
            }
        }
        return msg;
    }

前端：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.js"></script>
    <script>
        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax/ha",
                data:{'name':$("#name").val()},
                success:function (data) {
                    if (data.toString()=='OK'){        
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax/ha",
                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="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id="pwd" οnblur="a2()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

运行结果：
在这里插入图片描述

苹果和狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java-SpringMVC学习（三）----JSON、Ajax

文章目录JSON概述什么是JSON？JSON语法规则JSON和XML的异同点JSON字符串与JS对象的互相转换代码实例【一些知识点】实现：AJAX概述JQuery Ajax代码实例1.简单测试（HttpServletResponse实现）2.简单测试（SpringMVC实现）3.简单测试JSON概述什么是JSON？JavaScript Object Notation(JavaScript...
复制链接

扫一扫