Ajax 中文官网:https://jquery.cuishifeng.cn/jQuery.Ajax.html
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>
- 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
- 4、SpringBoot启动类
@SpringBootApplication
@MapperScan("cn.tedu.ajax.mapper")
public class AjaxApplication {
public static void main(String[] args) {
SpringApplication.run(AjaxApplication.class, args);
}
}
要想在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>
- 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)
}
- 将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>
- 2、上面html代码中请求的控制器方法代码如下
@RestController
//@RestController注解的含义是当前控制器类中每个控制器方法
// 都默认添加@ResponseBody注解
// SpringMvc框架会自动将@ResponseBody注解标记的方法的返回值转换为json格式
public class AjaxController {
@GetMapping("/test")
public String test(){
System.out.println("控制器方法执行");
/**
* 因为这个类使用的@RestController注解
* 所以返回的"helloAjax"并不是视图名称,而就是字符串
* ajax方法可以接收这个字符串
*/
return "helloAjax";
}
}
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略
}
- 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)
}
})
})
- 3、控制器方法编写如下
@GetMapping("/json")
//当前控制器中,返回值类型为实体类的情况下
//这个实体类对象返回到ajax的方法中时,会自动转化为json格式
public JsonResult json(){
JsonResult r=new JsonResult(200,"查询完成!");
return r;
}
- 最后通过一张图来巩固一下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>
- 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;
}
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>
- 2、控制器也同样可以使用实体类结构参数
@PostMapping("/param")
public JsonResult param(JsonResult result){
System.out.println(result);
return result;
}
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的类型
2、JSON字符串
- 字符串,我们常说的JavaScript中的字符串是单引号或者双引号引起来的。
var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
alert(person);//{"name":"zhangsan","sex":"男","age":"24"}
alert(typeof person);//string
3、JSON字符串和JOSN对象的转换
- json字符串转json对象,调用parse方法:
var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
var personObject = JSON.parse(person);
alert(personObject.name);//zhangsan
- json对象转为json字符串,调用stringify方法:
var person={"name":"zhangsan","sex":"男","age":"24"};//json对象
var personString = JSON.stringify(person);
alert(personString);
- 最后是个补充知识: ObjectMapper 框架
这是一个第三方框架,其中一个功能就是:可以把任意对象转换成json字符串
使用如下:
1、 导入依赖
<!-- Jackson JSON API-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.10.1</version>
</dependency>
2、转换
//集合转换成json字符串 需要一个第三方的框架进行转换
ObjectMapper om = new ObjectMapper();
//这个方法可以把任意对象转换为字符串 list 就是要转换的对象
String jsonStr = om.writeValueAsString(list);