SpringBoot项目的html页面使用axios进行get post请求

简介: SpringBoot项目的html页面使用axios进行get post请求

说明:本项目为SpringBoot项目而不是vue项目,本项目用于练习axios使用get及post请求
get和post请求都采用两种方式进行配置,并注明易错点

@[toc]

1.axios是什么

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,axios是对ajax的一种封装,而jquery也是对ajax的一种封装。
axios的github:https://github.com/axios/axios

2.vue项目为什么使用axios,而不使用jquery?

axios集成vue更好且占内存小,而如果只用jquery的ajax的话,毕竟几百k,$表达式也不用情况下显得太笨重了,因此vue项目使用axios居多且集成的更好。

3.SpringBoot项目的html页面引入axios方式,采用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

至于网上说的方案,对springboot项目测试无效
import axios from ‘axios’;
//安装方法
npm install axios
//或
bower install axios

4.官网为方便起见,为所有支持的请求方法提供了别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

5.get请求的两种方式

使用方式1(推荐) => axios.get();
注意1:headers请求头设置位置不一样,axios.get()中headers存在于{}中,而axios({})中headers当成一个key,value进行设置。
注意2:get请求参数封装与params对象中。

axios.get("/getVue", {
           params: {
               name:"zhangsan"
           },
           headers: {
               responseType: 'json'    //响应数据格式为"json"
           }
       }).then((res)=>{
           myForm.formMess.name = res.data.info.name;
           myForm.formMess.password = res.data.info.password;
           alert("查询数据成功!")
       }).catch(err => {
           console.log(err);   //打印响应数据(错误信息)
       });

使用方式2 => axios({})

axios({
     method:"get",
      url:"/getVue",
      params:{
          name:"zhangsan"
      },
      headers: {
          responseType: 'json'    //响应数据格式为"json"
      }
  }).then((res)=>{
      myForm.formMess.name = res.data.info.name;
      myForm.formMess.password = res.data.info.password;
      alert("查询数据成功!")
  }).catch(err => {
      console.log(err);    //打印响应数据(错误信息)
  });

6.post请求的两种方式

使用方式1(推荐) => axios.post();
注意点1:headers请求头设置位置不一样,axios.post()中headers存在于第三个{}中,而axios({})中headers当成一个key,value进行设置。
注意点2:axios.post()的第二个{}指代请求体中没有作为key的data,而axios({})中使用data作为请求体参数。

axios.post("/addVue", {
    "name":this.formMess.name,
    "password":this.formMess.password
     },{
         headers: {
             responseType: 'json'
         }
     }).then((res)=>{
         console.log(res);
         alert("提交数据成功!")
     }).catch(err => {
         console.log(err);    //打印响应数据(错误信息)
     });

使用方式2 => axios({})

axios({
     method:"post",
     url:"/addVue",
     data:{
         "name":this.formMess.name,
         "password":this.formMess.password,
     },
     header:{
         responseType: 'json'    //响应数据格式为"json"
     }
 }).then((res)=>{
     console.log(res);
     alert("提交数据成功!")
 }).catch(err => {
     console.log(err);   //打印响应数据(错误信息)
 });

本人相关其他文章链接

1.JQuery选择器+DOM操作+事件+DOM与JQuery对象间的转化

2.个人练习前端技术使用Bootstrap、JQuery、thymeleaf

3.JavaScript入门及基础知识介绍

4.AJax(XHR+Get和Post+AJax的封装)

5.SpringBoot项目的html页面使用axios进行get post请求

目录
相关文章
|
1月前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
80 1
SpringBoot获取项目文件的绝对路径和相对路径
|
1月前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
47 8
|
27天前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
39 2
|
1月前
|
JSON Java 数据库
SpringBoot项目使用AOP及自定义注解保存操作日志
SpringBoot项目使用AOP及自定义注解保存操作日志
44 1
|
22天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
34 0
|
16天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
31 7
|
16天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
27 6
|
16天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
29 5
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
42 1
[HTML、CSS]细节与使用经验

热门文章

最新文章