12-Axios的请求***

翁老师的教学团队

已于 2022-11-10 14:34:42 修改

阅读量118

点赞数

分类专栏： SpringBoot2.X整合文章标签： vue ajax

于 2020-11-28 16:51:23 首次发布

本文链接：https://blog.csdn.net/u013621398/article/details/110286675

版权

2022就业班同时被 2 个专栏收录

208 篇文章 5 订阅

订阅专栏

SpringBoot2.X整合

21 篇文章 0 订阅

订阅专栏

axios介绍

（1）以前 vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务
（2）现在（2.0之后） axios
是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
美 [ˈprɑ:mɪs]
axios的github:https://github.com/axios/axios

axios使用

在这里插入图片描述

（1）引入
（2）get请求
（3）post请求

<body>
		<div id="app">
				<input @click="myget2()" type="button" value="get请求">
				<hr/>
				<input @click="mypost()" type="button" value="post请求">
		</div>
	</body>
	<script>
		//view model
		var vm = new Vue(
				{
					el:'#app', //让vu掌握指定的视频区域
					data:{
					} ,//对应的数据
					methods:{
						myget:function () {
							axios.get('/users/find.do?id=1')
									.then(function (response) {//正常
										console.log(response);
										alert(response.data)
									})
									.catch(function (err) {//请求失败
										console.log(err);
										alert(response.err)
									});

						},
						myget2:function () {
							axios.get('/users/find.do', {
								params: {
									id: 1
								}
							})
							.then(function (response) {
								console.log(response);
							})
							.catch(function (err) {
								console.log(err);
							});


						},
						mypost:function () {

							axios.post('/users/find2.do', {
								id:1
							}) //将{id:1} 这个 json提交给后台，后面需要一个对象来接收 ，参数要加@RequestBody
							.then(function (res) {
								console.log(res);
							})
							.catch(function (err) {
								console.log(err);
							});

						}
					}
				}
		) //创建了MVVM中的VM对象
		
	</script>

将{id:1} 这个 json提交给后台，后面需要一个对象来接收，·`参数要加@RequestBody
RequestBody将json转换成User对象

@RestController
@RequestMapping("/users")
@Slf4j
public class UserController {
    @RequestMapping(path = "/find.do",method = {RequestMethod.GET})
    public Object get(Integer id){
        log.info("get id "+id);
        User user = new User();
        log.info("get user "+user);
        user.setId(id);
        user.setUsername("jack"+id);
        return user;
    }
    @RequestMapping(path = "/find2.do",method = {RequestMethod.POST})
    public Object post(@RequestBody  User u){//{id:1}
        log.info("post id "+u.getId());
        User user = new User();
        user.setId(u.getId());
        user.setUsername("jack"+u.getId());
        return user;
    }
}

翁老师的教学团队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
12-Axios的请求***

axios介绍（1）以前 vue-resourcevue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务（2）现在（2.0之后） axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中美 [ˈprɑ:mɪs]axios的github:https://github.com/axios/axiosaxios使用（1）引入（2）get请求（3）post请求<bod
复制链接

扫一扫