前后端交互，简单交互 spring-mvc + axios

最新推荐文章于 2023-11-12 22:41:57 发布

原创最新推荐文章于 2023-11-12 22:41:57 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析了Axios库的使用方法，展示了如何通过它实现前端与后端的异步数据交互。从基本的URL拼接到复杂的请求处理，再到后端响应的解析，全面覆盖了Axios在实际项目中的应用。通过具体代码示例，读者可以快速掌握Axios的使用技巧。

什么是 axios ?
一个很优秀的 ajax 库。百度一下，看云了解更多！
Ajax 异步传输，在不刷新页面的情况与后端完成一次交互。

		// url 拼接，好处多多 。 
		let url = ChengGlobal.baseUrl + "/xky/dynamic/msg";
		//调用axios方法。并没有使用别名。
                axios({
                    method: "post", //指定传输的方式
                    url: url,      //url
                    data: {          //发送给后端的数据， axios 默认会将转成 json 格式
                        phone: phone
                    }
                }).then(function (response) {   // 请求成功的回调函数，即请求成功执行
                    that.$message.success('验证码已发送，请注意查收');
                    that.respDynamicCode = response.code;
                    console.log(response);
                }).catch(function (error) {   //请求失败的回调函数，即请求失败时执行。
                    that.$message.error('服务器繁忙');
                });
		
		//总结： 前端的就这么多就可以发送数据了。  上面的代码相当于一个语句 。
		要写在 js 函数中。

后端的代码

		
	@Controller
	@RequestMapping("/xky/dynamic")  //路径配置
	public class XuDynamicMsgController {
	
	    @RequestMapping("msg")  //路径配置，会与类的路径拼接  即 /xky/dynamic/msg
	    @ResponseBody
	    public JSONObject getDynamic(@RequestBody String phone)
		//@RequestParam 是从地址栏读取映射
		//@RequestBody   是从请求 body 中读取映射
	    {
	       
	    }
	}

一篇文章链接，很好。
https://blog.youkuaiyun.com/csdn_yudong/article/details/79668655