前后端调用（Ajax）学习总结

最新推荐文章于 2023-10-31 12:39:56 发布

yyds_it_huo

最新推荐文章于 2023-10-31 12:39:56 发布

阅读量692

点赞数

文章标签： ajax 学习 javascript

本文链接：https://blog.csdn.net/yyds_it_huo/article/details/124619295

版权

1. Ajax

使用Ajax技术网页应用能够快速的将增量更新在用户界面上，而不需要重新加载整个页面，这使得程序能够更快的回应用户的操作。

1.1 Ajax特点

局部刷新，异步访问。

同步请求：浏览器发起请求到服务器，如果服务器没有响应，用户则无法获取页面数据，处于等待状态，不可以做其他操作。
异步请求：异步请求时，浏览器可以进行其他的操作，当ajax数据获取之后，信息在页面局部刷新，可以理解为多线程的操作方式。

1.2 Ajax异步原理

Ajax可以异步原理：中间有Ajax引擎
回调函数：服务器返回数据，通过回调函数通知用户。

2. 跨域问题

注解方式

@RestController
@RequestMapping("/axios")
@CrossOrigin  //解决跨域问题
public class AxiosController {

3. 前后端调用案例

3.1 前后端调用—入门案例

前端JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Axios demo</h1>
		<script src="../js/axios.js"></script>
		<script>
			let url1="http://localhost:8080/axios/findStr"
			//promise是封装服务器返回值的对象
			axios.get(url1)
				.then(function(promise){
					console.log(promise.data)
				})
		</script>
	</body>
</html>

编辑AxiosController

package com.huo.demo1_Axios.controller;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/axios")
@CrossOrigin  //解决跨域问题
public class AxiosController {
    @GetMapping("/findStr")
    public String findStr(){
        return "好的好的哈";
    }
}

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

3.2 前后端调用—带简单参数

编辑页面JS

	let url2="http://localhost:8080/axios/getUserById?id=100";
		axios.get(url2)
			.then(function(promise){
				console.log(promise.data)
			})

编辑AxiosController

@GetMapping("/getUserById")
    public String getUserById(Integer id){
        return "id:"+id;
    }

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

3.3 前后端调用—简化操作

axios.defaults.baseURL="http://localhost:8080";
		let url1="/axios/findStr"
		axios.get(url1)
			.then(function(promise){
				console.log(promise.data)
			})

3.4 前后端调用—对象传参

编辑页面JS

//对象参数传递写法  利用API自动拼接参数
	let user={id: 100,name: "tomcat"};
	axios.get("/axios/findUser",{params: user})
		.then(function(promise){
			console.log(promise.data)
		})

编辑AxiosController

	@GetMapping("/findUser")
    public User getFindUser(User user){
        return  user;
    }

返回User对象
在这里插入图片描述

3.5 前后端调用—ResultFul结构

ResultFul的结构不区分请求类型，任意请求类型都可以通过ResultFul的结构发送数据。
编辑页面JS

//RestFul 结构 模板字符串写法
	let rest={id:100,name:"tomcat",age:99}
	axios.get(`/axios/result/${rest.id}/${rest.name}/${rest.age}`)
		.then(function(promise){
			console.log(promise.data)
		})

编辑AxiosController

	//对象方式接收参数
    @GetMapping("/result/{id}/{name}/{age}")
    public User result(User user){

        return user;
    }
    //单个属性值接收的方式使用 @PathVariable 注解
    /*@GetMapping("/result/{id}/{name}/{age}")
    public User result(@PathVariable Integer id,
                       @PathVariable String name,
                       @PathVariable Integer age){
        User user=new User();
        user.setId(id);
        user.setName(name);
        user.setAge(age);
        return user;
    }*/

返回user对象
在这里插入图片描述

3.5 前后端调用—Post提交方式

编辑页面JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax post 请求</h1>
		<script src="../js/axios.js"></script>
		<script>
			axios.defaults.baseURL="http://localhost:8080"
			
			let user={id:100,name:"tomcatPost",age:99}
			axios.post("/axios/saveUser",user)
				.then(function(promise){
					console.log(promise.data)
				})
		</script>
	</body>
</html>

编辑AxiosController

	@PostMapping("/saveUser")
    public User saveUser(@RequestBody User user){
        return user;
    }

返回User对象
在这里插入图片描述
说明：前端代码传递的JS对象，而后端使用的是java对象，2种对象没有办法直接转化，需要转化为JSON进行传递，axios使用post请求时，自动将JS对象解析为JSON串。
注：@RequestBody 将JSON转化为Java对象
@ResponseBody 将Java对象转化为JSON串

4. 跨域问题

浏览器的网址与Ajax请求的网址必须满足如下的要求：
协议://域名：端口号必须相同
如果满足要求则是同域访问，如果不满足要求则是跨域访问。

5. Axios优化

5.1 回调地狱

业务中经常遇到A的数据来源B，B的数据来源C。以此类推，则形成了Ajax嵌套的结构。

<script>
	axios.defaults.baseURL="http://localhost:8080"
			
	let user={id:100,name:"哈哈哈",age:99}
	axios.post("/axios/saveUser",user)
		.then(function(promise){
			console.log(promise.data)
			let arg1=promise.data
					
			axios.post("/axios/xxxx",arg1)
				.then(function(promise2){
					console.log(promise2.data)
					let arg2 = promise2.data
							
					axios.post("/axios/xxx",arg2)
						.then(function(promise3){
							console.log(promise3)
						})
							
				})
		})
 </script>

axios函数方式

<script>
	axios.defaults.baseURL="http://localhost:8080"
	/* 	 1.定义一个函数
		规则：
			1. async 标识函数
			2. await 标识请求
			3. 2者必须同时出现
			4. 可以直接获取then中的回调函数promise */
	async function saveUser(){
		let user={id:100,name:"哈哈哈"}
				
		/* let promise=await axios.post("/axios/saveUser",user)
		console.log(promise.data) */
				
		let {data:result,status: code}=await axios.post("/axios/saveUser",user)
		console.log(result) //对象
		console.log(code)	//状态码
		}
			
		/*  2.调用函数  */
		saveUser()
 </script>

箭头函数写法

<script>
		/* 箭头函数写法
			1.去除function关键字
			2.参数与函数体之间使用=>连接
			3.如果只有一个参数，则参数括号可以省略
			4.箭头函数使用一般用于回调函数
			5.如果使用function关键字 则使用this时会产生歧义 */
			 
		let user2={id:100,name:"箭头函数"}
		axios.post("/axios/saveUser",user2)
			.then(promise => {
				console.log(promise.data)
			})
			
</script>

yyds_it_huo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前后端调用（Ajax）学习总结

1. Ajax使用Ajax技术网页应用能够快速的将增量更新在用户界面上，而不需要重新加载整个页面，这使得程序能够更快的回应用户的操作。1.1 Ajax特点局部刷新，异步访问。同步请求：浏览器发起请求到服务器，如果服务器没有响应，用户则无法获取页面数据，处于等待状态，不可以做其他操作。异步请求：异步请求时，浏览器可以进行其他的操作，当ajax数据获取之后，信息在页面局部刷新，可以理解为多线程的操作方式。1.2 Ajax异步原理Ajax可以异步原理：中间有Ajax引擎回调函数：服务器返回数据
复制链接

扫一扫