本文详细介绍了Ajax的基础概念、异步原理，并通过Axios库展示了从项目环境搭建到各种请求类型的实战案例，包括GET、POST等请求方式，以及参数传递、对象转换和错误处理等关键点，深入浅出地探讨了前后端数据交互的过程。
目录
一、Ajax讲解
1.Ajax介绍
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率.
特点: 局部刷新,异步访问
2.Ajax异步原理说明
组成部分:
1. 用户
2. Ajax引擎–代理
3. 服务器
异步的特点：
1. 由Ajax引擎直接访问后端服务器。
2. 在回调函数没有执行之前，用户可以执行自己的任务。 异步
3.Axios入门案例
-1.项目环境搭建
-2.编辑页面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios测试</title>
<script src="../js/axios.js"></script>
</head>
<body>
<h1>Axios测试案例-1</h1>
<script>
/*
1.可以编辑Axios 发送ajax请求
2.不同的服务器之间发送ajax请求时会有"跨域"问题
3.解决跨域问题 通过注解搞定. @CrossOrigin
*/
var url = "http://localhost:8080/hello"
axios.get(url)
.then(function(result){ //回调函数!!!
console.log(result)
})
</script>
</body>
</html>-3.编辑UserController，添加跨域
-4.页面效果展现
二、 前后端交互案例
1.Axios-Get请求
-1.业务需求说明
需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserById?id=100
参数: id = 100
返回值: User对象的JSON 伪造一个User对象
-2.编辑AxiosController
package com.jt.controller;
import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
/**
* URL地址: http://localhost:8080/axios/getUserById?id=100
* 参数: id = 100
* 返回值: User对象的JSON 伪造一个User对象
*/
@RequestMapping("/getUserById")
public User getUserById(Integer id){
//根据ID查询数据库
User user = new User();
user.setId(id);
user.setName("好好学习");
user.setAge(1000);
user.setSex("男");
return user;
}
}
-3.编辑页面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios测试</title>
<script src="../js/axios.js"></script>
</head>
<body>
<h1>Axios测试案例-1</h1>
<script>
/* 1.可以编辑Axios，发送ajax请求
2.不同的服务器之间发送ajax请求时会有“跨域”问题
3.解决跨域问题，通过@CrossOrigin搞定*/
/* var 关键字没有作用域的概念
* let 相当于var，定义变量， 有作用域，更加安全
* const 定义常量
* 关于axios数据返回值对象的说明：
* axios为了接受后端服务器的数据，利用promise对象封装参数
*/
let url="http://localhost:8080/axios/getUserById?id=100"
axios.get(url)
.then(function(promise){
console.log(promise.data)
})
</script>
</body>
</html>2.Axios-Get-对象参数写法
-1.业务需求说明
需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
参数: id=xxx name=xxx
返回值: List [user1,user2]
-2.编辑UserController
/**
* URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx
* 参数: id=xxx name=xxx
* 返回值: List [user1,user2]
*/
@RequestMapping("/getUserByNA")
public List<User> getUserByNA(User user){
List<User> list = new ArrayList<>();
list.add(user);//简化赋值操作 直接返回
list.add(user);
return list;
}
-3.编辑页面JS
/**
* 1.get请求 对象传参
* 2.语法说明:
* 关键字: params : 对象信息
*/
let user2 = {name:"tomcat",age:100}
let url2 = "http://localhost:8080/axios/getUserByNA"
axios.get(url2,{params:user2})
.then(function(promise){
console.log(promise.data)
})
-4.页面效果展现
1.页面URL地址
2. 页面打印信息
3. Axios-Get-restFul结构
-1.需求说明
查询name=tomcat sex=“男” 的用户 要求请求采用restFul的风格实现数据获取.
URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
参数: name/sex
返回值: List
-2. 编辑AxiosController
/**
* URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
* 参数: name/sex
* 返回值: List<User>
*/
@RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值
public List<User> findUserByNS(User user){
List<User> list = new ArrayList<>();
list.add(user);
list.add(user);
return list;
}
-3.编辑前端JS
/**
* 需求: 利用restFul的风格实现前后端交互.
* URL: http://localhost:8080/axios/findUserByNS/tomcat/男
* 难点:
* 1.tomcat/男直接写死在url地址中. 后期扩展不方便
* 模版字符串写法:ES6引入的新功能
* 语法:
* 1. 使用反引号 ``
* 2. 作用: 1.可以保证字符串的格式
* 2.可以动态获取变量的值
*/
let user3 = {name: "tomcat", sex: "男"}
let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}`
let html = `<div>
<p>AAA</p>
<p>BBB</p>
</div>
`
axios.get(url3)
.then(function(promise){
console.log(promise.data)
})
-4.页面效果展现
1.页面URL地址
2. 页面数据显示
4. Axios-Post请求
-1.常见post请求种类
- form表单提交 method=“post” 同步（要素：页面是否刷新）
- axios.post() 异步操作.
-2. axios post入门案例--编辑前端JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios测试</title>
<script src="../js/axios.js"></script>
</head>
<body>
<h1>Axios测试案例-2</h1>
<script>
/*
语法:
1.参数 axios.post(URL地址,数据对象)
2.注意事项: 与axios.get(url,{params:对象})请求写法不一样.
*/
let url1 = "http://localhost:8080/axios/saveUser"
let user1 = {id:100, name:"猫", age:2, sex: "母"}
axios.post(url1,user1)
.then(function(promise){
console.log(promise.data)
})
</script>
</body>
</html>
-3.前端页面解析
说明: axios.post请求中 如果传递了js对象.则发送到后端服务器的数据是 JSON串.
-4. 编辑AxiosController
/**
* URL: "http://localhost:8080/axios/saveUser"
* 参数: {"id":100,"name":"猫","age":2,"sex":"母"} json串
* url1: http://xxx/axios/saveUser?id=xxx&name=xxx
* 返回值: "新增用户成功!!!"
* 难点:
* 1.Get请求数据是通过?key=value&key2=value2的方式获取
* post请求 数据是json串 数据结构不同. 所以不能使用User对象接收
* 2.JSON串想把法转化为User对象
* User转化为JSON串 @ResponseBody
* JSON串转化为User @RequestBody
* 3.JSON串转化 要求json串中的属性与对象中的属性一致,
* 并且赋值时调用对象的set方法
* 4.@RequestMapping可以支持任意类型的请求. 但是这样的写法不安全.
* 改进: 只能接收固定类型的请求
* @PostMapping("/saveUser")
* @GetMapping
* @PutMapping
* @DeleteMapping
*/
//@RequestMapping(value="/saveUser",method = RequestMethod.POST)
//@PostMapping("/saveUser")
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
System.out.println(user);
return "新增用户成功!!!";
}
-5.页面效果测试
-6.关于请求常见异常
- 405 异常 ajax的请求类型与后端接收的请求类型不匹配.
- 400异常 参数类型不匹配
- 404异常 请求路径找不到
5.请求类型和业务关系
常见请求类型:
1.GET： 查询操作
2.DELETE： 删除操作， get/delete 用法相同
3.POST： .表单数据提交 ， 新增操作
4.PUT： 修改操作， post/put 用法相同
6.用户修改操作
-1.编辑页面JS
/**
* 业务需求:
* 完成用户的修改操作.
* 将ID=100的数据 name改为张三 age改为18 sex改为女
* URL: http://localhost:8080/axios/updateUser
* 返回值: 修改成功!!! 数据要求后端打印
*/
let url2="http://localhost:8080/axios/updateUser"
let user2={id:100,name:"张三",age:18,sex:"女"}
axios.put(url2,user2)
.then(function(promise){
console.log(promise.data)
})
-2.编辑AxiosController
/**
* URL:http://localhost:8080/axios/updateUser
* 参数: JSON串
* 返回值: String
*/
@PutMapping("/updateUser")
public String updateUser(@RequestBody User user){
System.out.println(user);
return "修改成功!!!";
}
956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
