2.8.2 基于VUA的前端项目中AJAX的实现

蟑螂恶霸不是恶霸

已于 2023-06-08 14:36:00 修改

阅读量137

点赞数

分类专栏：零基础入门到就业--JAVA篇文章标签： ajax 前端 javascript

于 2023-04-14 09:44:15 首次发布

本文链接：https://blog.csdn.net/whatfuswd/article/details/129493703

版权

零基础入门到就业--JAVA篇专栏收录该内容

224 篇文章 4 订阅

订阅专栏

1.远程调用

因为这次测试案例需要调用我们上一节完成的springbot_ssm代码，但是此时调用存在跨域问题，此时前端项目运行后，会在浏览器报：Access to XMLHttpRequest at ‘http://localhost:8090/findAll’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource错误，所以我们先要解决跨域问题：
在这里插入图片描述

1.1 什么是跨域

说明：浏览器解析Ajax时要求浏览器的网址，与Ajax请求的网址，必须满足三要素：
1. 协议相同
2. 域名相同
3. 端口号相同
如果上述的三要素都满足，则叫同域访问，如果三要素有一项不满足，则称为跨域访问。

我们只需要在后端项目的控制类上添加@CrossOrigin注解即可：
在这里插入图片描述

1.2 跨域访问案例

观察下面的访问地址，区分其是同域还是跨域，如果是跨域，说明为什么是跨域：

http://www.baidu.com/xxx/xxx
https://www.baidu.com/xxx/xxx

跨域请求，协议不同

http://www.110.242.68.3:80.com/xxx/xxx
http://www.baidu.com:80/xxx/xxx

跨域请求，域名不同

http://www.baidu.com/xxx/xxx
http://www.baidu.com:80/xxx/xxx

同域请求，http端口号80为默认请求，写不写都是80

https://www.baidu.com/xxx/xxx
https://www.baidu.com:443/xxx/xxx

同域请求， https请求端口号默认为443，写不写都是443

浏览器地址：http://127.0.0.1:8848/vuejs/xxxx/xxxx
Ajax请求网址：http://localhost:8090/vuejs/xxxx/xxxx

跨域，域名，端口号均不同，虽然localhost地址就是127.0.0.1，但这不是固定的，不要自己为其进行默认的转换，localhost就是localhost。

1.3 请求类型与业务之间的关系

1.3.1 常用请求类型

请求类型共有8种：
在这里插入图片描述
常用的为其中get,post,put,delete四种；

1.3.2 类型与请求的映射关系

新增操作
- 类型：POST
- 接收的注解：@PostMapping()
删除操作
- 类型：DELETE
- 接收的注解：@DeleteMapping()
更新操作
- 类型：PUT
- 接收的注解：@PutMapping()
查询操作
- 类型：GET
- 接收的注解：@GetMapping()

此前我们的查询中，使用的都是@RequestMapping注解，但其实在实际开发中并不使用，其安全度比较低，我们一般使用@GetMapping()注解。

2.远程入门案例测试

2.1 不带参数get请求

2.1.1 编辑页面JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>远程调用案例</title>
</head>
<body>
    <div id="app">
        <h1>前后端调用</h1>
    </div>
    
    <!-- 1.完成前后端远程调用 -->
    <!-- 1.1引入js函数 -->
    <script src="../js/axios.js"></script>
    
    <script>
        
        //1.动态获取用户列表信息 axios.get(url地址，提交的参数)
        let url1 = "http://localhost:8090/findAll"
        axios.get(url1)
            .then(function(promise){
                console.log(promise)
                //获取服务器返回值的数据
                console.log(promise.data)
            })
        
    </script>
</body>
</html>

2.1.2 前后端调用结果

在这里插入图片描述

2.2 带参数GET请求

2.2.1 编辑页面JS

//2. 根据id动态获取用户信息
			let id = 3
			let url2 = "http://localhost:8090/findUserById?id="+id
			axios.get(url2)
				 .then(function(promise){
					 console.log(promise.data)
				 })

2.2.2 页面效果展现

在这里插入图片描述

2.3 GET请求参数封装为对象用法

2.3.1 F12 开发工具用法

请添加图片描述

2.3.2 前端页面JS

			//3.多参数的get请求如果是多个参数，可以考虑将其封装为对象
			// let age = 18
			// let sex = "女"
			// let url3 = "http://localhost:8090/findUserByAs?age="+age+"&sex="+sex
			let user3 = {age: 18, sex: "女"}
			let url3 = "http://localhost:8090/findUserByAs"
			//get请求要传递对象要使用{params:url3}来接
			axios.get(url3,{params:user3})
				.then(function(promise){
					console.log(promise.data)
				})

2.3.3 前端请求路径结构

请添加图片描述

2.3.4 前端响应

在这里插入图片描述

2.4 PUT请求案例

2.4.1 前端页面JS

为了不将传入的数据写死，要求必须使用restful结构实现，直接使用传统的restful结构当传入参数比较多时，会十分繁琐，所以这里我们使用模板字符串。

其可以保留代码片段的格式，并且可以动态取值，其使用``包裹整个代码片段，每个参数之间使用/分隔，参数使用${key}进行接收，如：

let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`

			//4.实现数据修改的操作
			//4.1请求路径 要求必须使用restful结构
			// let id = 1
			// let name = "黑熊精"
			// let age = 3000
			// let sex = "男"
			// let url4 = "http://localhost:8090/updateById/"+id+"/"++name"/"++age"/"+sex+"
			//以上写法正确，但是最low的写法
			let user4 = {id:1,name:"黑熊精",age:3000,sex:"男"}
			/* 
				4.2 前端知识点：模板字符串写法
					语法：``  反引号
					取值：${key}
					作用：1.保留代码片段的格式
						2.可以动态取值 ${key}
			 */
			let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
			//具体类型已经写到了查询URL中，put里已经不需要再写了
			axios.put(url4)
				.then(function(promise){
					console.log(promise.data)
				})
			/* 
				完成后会有跨域报错问题，是因为参数接收导致的
				Idea中@RequestMapping处也要求必须使用put类型的注解，将其修改为
				@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}",
				                        method = RequestMethod.PUT)或修改为
				@PutMapping("updateById/{id}/{name}/{age}/{sex}")
			 */

2.4.2 后端idea注解修改

    //@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}",method = RequestMethod.PUT)
    @PutMapping("updateById/{id}/{name}/{age}/{sex}")
    public String updateById(User user){
        userService.updateById(user);
        return "用户修改成功"; 
    }

此处注解使用@PutMapping("updateById/{id}/{name}/{age}/{sex}")或@RequestMapping(value = "/updateById/{id}/{name}/{age}/{sex}", method = RequestMethod.PUT)后进行测试。

2.5 POST请求案例

2.5.1 编辑页面JS

<script src="../js/axios.js"></script>
		<script>
			/**
			 *  完成用户入库操作
			 *  用法: axios.post(url地址,对象名称)
			 * 	      axios.put(url地址, 对象名称)
			 * 
			 * 		  axios.get(url地址,{params: 对象名称})
			 * 		  axios.delete(url地址,{params: 对象名称})
			 */
			let url1 = "http://localhost:8090/axios/saveUser"
			let user1 = {name: "tomcat",age: 18, sex: "女"}
			axios.post(url1,user1)
				.then(function(promise){
					console.log(promise.data)
				})
			
			
		</script>

蟑螂恶霸不是恶霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.8.2 基于VUA的前端项目中AJAX的实现

说明：浏览器解析Ajax时要求浏览器的网址，与Ajax请求的网址，必须满足三要素：1. 协议相同2. 域名相同3. 端口号相同如果上述的三要素都满足，则叫同域访问，如果三要素有一项不满足，则称为跨域访问。我们只需要在后端项目的控制类上添加。
复制链接

扫一扫