小丑西瓜9

这个屌丝很懒，什么也没留下！

热门标签

【Ajax 在SpringBoot中的使用】_springboot ajax

作者：小丑西瓜9 | 2024-05-31 11:44:45

踩

springboot ajax

Ajax 中文官网：https://jquery.cuishifeng.cn/jQuery.Ajax.html
1

Ajax

1、什么是ajax

AJAX即Asynchronous JavaScript and XML（异步JavaScript和XML），是实现客户端和服务器异步通信的方法
同步:请求和页面的跳转同时发生
异步:请求和页面的跳转不同时发生
异步的请求可以实现页面的局部刷新

2、异步的好处

节省流量
无需刷新整个页面,服务器压力也降低
用户体验好

3、Ajax在SpringBoot中的使用

在这里插入图片描述

1、创建一个新的项目ajax
2、修改pom.xml文件中的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.8.RELEASE</version>
        <relativePath/> 
    </parent>
    <groupId>cn.tedu</groupId>
    <artifactId>ajax</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ajax</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

3、在application.properties文件中添加配置信息

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/tedu_ums?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true
spring.datasource.username=root
spring.datasource.password=root

# Mybatis显示sql语句输出的配置
logging.level.cn.tedu.ajax.mapper=TRACE
1
2
3
4
5
6
7

4、SpringBoot启动类

@SpringBootApplication
@MapperScan("cn.tedu.ajax.mapper")
public class AjaxApplication {

    public static void main(String[] args) {
        SpringApplication.run(AjaxApplication.class, args);
    }

}
1
2
3
4
5
6
7
8
9

要想在SpringBoot中使用ajax必须了解JSON格式

4、Json 使用

JSON:（JavaScript Object Notation，JavaScript对象表示法），它是一种表示对象的格式：
1、在resources文件夹下的static文件夹中我们创建一个html文件如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    let u={
        id:10,
        username:"tom",
        skills:["c++","python","php"],
        dept:{id:1,name:"开发部"}
    }
    console.log(u.username)
    console.log(u.skills[2]);
    console.log(u.dept.name)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、启动服务访问这个页面,浏览器控制台输出如下

结果：证明我们可以使用json格式的对象
补充：使用Json对象的几种方式：
创建json数组对象
let j1=[“刘备”,“关羽”,“张飞”];
创建map对象
let j2={“name”:“吕布”,“age”:“18”};
嵌套格式1
let j3 = {“name”:“苍老师”,“age”:“18”,“friends”:[“传奇哥”,“克晶姐”]};
嵌套模式2
let j4 = [{“name”:“java基础”,“author”:“苍老师”},{“name”:“python基础”,“author”:“传奇哥”}];

//for循环遍历上面的 json 对象
for (let i = 0;i<j4.length;i++){
        let book = j4[i];
        //控制台输出
        console.log(book.author)
    }
1
2
3
4
5
6

将json字符串转换为json对象
let jsonStr=’[“刘备”,“关羽”,“张飞”]’;
let j5 = JSON.parse(jsonStr);

5、无参数返回字符串的ajax请求

1、我们新建一个ajaxtest.html的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="msg">hehehe</div>
<input id="btn" type="button" value="ajax">
<script type="text/javascript">
    //jquery代码
    //通过点击btn按钮,发送一个ajax请求
    $("#btn").click(function(){
        //开始发送ajax请求
        $.ajax({
            method:"get",
            url:"/test",
            dataType:"text",//表示这个ajax请求的返回值是字符串
            success:function(result){//result表示控制器方法的返回值
                //当ajax请求完成之后运行的代码
                console.log(result);
                $("#msg").html(result);
            }
        })
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2、上面html代码中请求的控制器方法代码如下

@RestController
//@RestController注解的含义是当前控制器类中每个控制器方法
// 都默认添加@ResponseBody注解
// SpringMvc框架会自动将@ResponseBody注解标记的方法的返回值转换为json格式
public class AjaxController {

    @GetMapping("/test")
    public String test(){
        System.out.println("控制器方法执行");
        /**
         * 因为这个类使用的@RestController注解
         * 所以返回的"helloAjax"并不是视图名称,而就是字符串
         * ajax方法可以接收这个字符串
         */
        return "helloAjax";
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6、无参数返回json类型的ajax请求

1、首先我们要在建一个实体类JsonResult

public class JsonResult {
    private int state;
    private String message;

    public JsonResult(){}

    public JsonResult(int state, String message) {
        this.state = state;
        this.message = message;
    }
    //get\set\toString略
}
1
2
3
4
5
6
7
8
9
10
11
12

2、然后在编写ajax的js代码

//$("#json")表示html页面上有个id为json的按钮
$("#json").click(function(){
    $.ajax({
        method: "get",
        url:"/json",
        dataType:"json",//表示本次请求控制器返回的信息格式是json格式
                        //实际上dataType属性的默认值就是json可以省略
        success:function(result){//result是json格式的对象
            console.log(result);
            $("#msg").html(result.message)
        }
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13

3、控制器方法编写如下

@GetMapping("/json")
//当前控制器中,返回值类型为实体类的情况下
//这个实体类对象返回到ajax的方法中时,会自动转化为json格式
public JsonResult json(){
    JsonResult  r=new JsonResult(200,"查询完成!");
    return r;
}
1
2
3
4
5
6
7

最后通过一张图来巩固一下ajax的运行流程

7、有参数返回json类型的ajax请求

1. 少量参数处理方案

1、新建一个param.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 如果确定发送异步请求,
    那么form标签中的method和action属性也就没有意义了 -->
<form method="post" action="/xxx">
编号:<input id="state" name="state" type="text"><br>
信息:<input id="message" name="message" type="text"><br>
<input id="send" type="submit" value="发送">
</form>
<script type="text/javascript">
    $("#send").click(function(){
        let s=$("#state").val();
        let m=$("#message").val();
        $.ajax({
            method:"post",
            url:"/param",
            data:{state:s,message:m},
            success:function(result){
                console.log(result.message);
            }
        })
        //阻止表单提交
        return false;
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2、控制器方法中编写下面代码接收ajax传入的参数

@PostMapping("/param")
//ajax代码中data属性的写法为:data:{state:s,message:m},
//方法中参数名称必须和data指定的json格式对应
//SpringMvc会自动将s的值赋给int state,将m的值赋给String message
public JsonResult param(int state,String message){
    System.out.println("state = " + state);
    System.out.println("message = " + message);
    JsonResult result=new JsonResult(state,message);
    return result;
}
1
2
3
4
5
6
7
8
9
10

2、大量参数处理方案

如果一个表单有较多的输入项,那么使用上面的方式就会过于笨拙，我们就可以使用下面的写法简化
1、重构param.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 如果确定发送异步请求,
    那么form标签中的method和action属性也就没有意义了 -->
<!-- 要想更方便的给ajax传递表单中的信息,先将form标签定义一个id属性 -->
<form id="res" method="post" action="/xxx">
编号:<input id="state" name="state" type="text"><br>
信息:<input id="message" name="message" type="text"><br>
<input id="send" type="submit" value="发送">
</form>
<script type="text/javascript">
    $("#send").click(function(){
        //let s=$("#state").val();
        //let m=$("#message").val();
        $.ajax({
            method:"post",
            url:"/param",
            //利用form表单的id,调用serialize方法
            //将表单中的所有信心,打包发送到springMvc
            //注意,serialize方法依据的是表单中的name属性,
            // 所以name属性要赋值才能使用serialize方法
            data:$("#res").serialize(),
            success:function(result){
                console.log(result.message);
            }
        })
        //阻止表单提交
        return false;
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

2、控制器也同样可以使用实体类结构参数

@PostMapping("/param")
public JsonResult param(JsonResult result){
    System.out.println(result);
    return result;
}
1
2
3
4
5

8、Json对象和Json字符串的区别与转换

1、JSON对象

先介绍一下json对象，首先说到对象的概念，对象的属性是可以用：对象.属性进行调用的。例如：

var person={"name":"zhangsan","sex":"男","age":"24"}//json对象
alert(person.name);//zhangsan  控制台弹出person.name 
alert(typeof person);//object  获取person的类型
1
2
3

2、JSON字符串

字符串，我们常说的JavaScript中的字符串是单引号或者双引号引起来的。

var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
alert(person);//{"name":"zhangsan","sex":"男","age":"24"}
alert(typeof person);//string
1
2
3

3、JSON字符串和JOSN对象的转换

json字符串转json对象,调用parse方法：

var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
var personObject = JSON.parse(person);
alert(personObject.name);//zhangsan
1
2
3

json对象转为json字符串，调用stringify方法：

var person={"name":"zhangsan","sex":"男","age":"24"};//json对象
var personString = JSON.stringify(person);
alert(personString);
1
2
3

最后是个补充知识： ObjectMapper 框架
这是一个第三方框架，其中一个功能就是：可以把任意对象转换成json字符串
使用如下：
1、导入依赖

 <!-- Jackson JSON API-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.10.1</version>
    </dependency>
1
2
3
4
5
6

2、转换

 //集合转换成json字符串 需要一个第三方的框架进行转换
        ObjectMapper om = new ObjectMapper();
        //这个方法可以把任意对象转换为字符串  list 就是要转换的对象
        String jsonStr = om.writeValueAsString(list);
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/652144

【Ajax 在SpringBoot中的使用 】_springboot ajax