Axios通过传统方式使用GET和POST

- 日理万妓 2023-02-21 12:44 67阅读 0赞

这里介绍的是Axios使用传统的方式引入依赖，通过CDN或者引入JS文件的方式，下面分别就GET好POST方式来处理

<div class="welcomebox" id="app">
            <p id="hero"></p>
            <button @click="postAxios()">postAxios</button>
      </div>

引入CDN依赖，这里面引入俩个模块，其中QS是用来处理传递的参数的，因为Axios默认是以JSON格式传输的，而我后端是使用@RequestParam来接收的，当然如果你使用@RequestBody来接收那么就不需要了

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

<script>
        new Vue({ 
            el: '#app',
            data() { 
                return { 
                    info: null
                }
            },
            methods: { 
                //POST方式
                postAxios: function () { 
                    var headers = { };
                    headers['X-CSRF-TOKEN'] = "[[${_csrf.token}]]";
                    axios({ 
                        method: 'post',
                        url: '/admin/rest/demo/show',
                        headers: { 
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRF-TOKEN': "[[${_csrf.token}]]"
                        },
                        data: Qs.stringify({ 'apptype': 'APPTYPE001'})
                    }).then(function (response) { 
                        var jsonObject = response.data;
                        var jsonString = JSON.stringify(jsonObject)
                        document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据：" + jsonString;
                    }).catch(function (error) { 
                        console.log(error);
                    });
    
    
                }
            },
            mounted() { 
                //GET方式
                axios
                    .get('/admin/rest/demo/show')
                    .then(function (response) { 
                        var jsonObject = response.data;
                        var jsonString = JSON.stringify(jsonObject)
                        document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据：" + jsonString;
                    }).catch(function (error) {  // 请求失败处理
                    console.log(error);
                });
            }
        })
    </script>

后端代码

@Slf4j
    @RestController
    @RequestMapping("/admin/rest/demo")
    @RequiredArgsConstructor(onConstructor = @__(@Autowired))
    public class Demo { 
    
        private final SystDictService systDictService;
    
        @GetMapping("/show")
        public ApiResponse show() { 
            List<SystDict> systDicts = systDictService.listSystDictCenter();
            return ApiResponse.ofSuccess(systDicts);
        }
    
        @PostMapping("/show")
        public ApiResponse show(@RequestParam( "apptype") String apptype) { 
            SystDict systDictByName = systDictService.getSystDictByName(apptype);
            return ApiResponse.ofSuccess(systDictByName);
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，67人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中通过Axios向SpringBoot发送get和post请求

场景前端使用Vue+ElementUI实现页面布局。跨域请求使用axios。为了将axios的请求对象封装成公共的。新建request.js impo

快来打我*/ 2023年10月06日 13:52/ 0 赞/ 52 阅读

相关 axios发送Post和get请求

1.安装 node方式 > npm install axios 设置index.js > import axios from ‘axios’ > Vue.prot

不念不忘少年蓝@/ 2023年07月13日 10:39/ 0 赞/ 37 阅读

相关使用axios发送get、post请求

get请求方式一 axios.get('/login?userId=111') .then(r

妖狐艹你老母/ 2023年07月13日 03:40/ 0 赞/ 95 阅读

相关 Axios通过传统方式使用GET和POST

这里介绍的是Axios使用传统的方式引入依赖，通过CDN或者引入JS文件的方式，下面分别就GET好POST方式来处理 <div class="welcomebox"

- 日理万妓/ 2023年02月21日 12:44/ 0 赞/ 68 阅读

相关 axios实现GET/POST

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔光的暖阳◎/ 2022年10月27日 15:54/ 0 赞/ 230 阅读

相关 Axios中get方法和post方法方式提交数据（等同axios方法methos属性的get和post）

Axios的post方法（post方式也是一样的）： axios.post()方法不设置headers会默认Content-type为application/json；c

左手的ㄟ右手/ 2022年05月12日 11:08/ 0 赞/ 328 阅读

相关 axios get / post request

五：axios： axios并不是vue插件，所以不能使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。为了解决这个问题，可以在引入 axi

清疚/ 2022年04月16日 03:26/ 0 赞/ 327 阅读

相关 Axios通过get和post方法提交和获取数据[基本使用]

在main.js中全局引入axios //全局引入axios //需要npm两个包axios和vue-axios Vue.use(VueAxios,a

梦里梦外;/ 2022年04月03日 01:20/ 0 赞/ 706 阅读

相关通过GET和POST方式获取页面内容

网络爬虫，即Web Spider，是一个很形象的名字。把互联网比喻成一个蜘蛛网，那么Spider就是在网上爬来爬去的蜘蛛。 HTTP协议中定义了四个与服务器进行交互的方法，分

待我称王封你为后i/ 2021年09月13日 22:52/ 0 赞/ 743 阅读

相关封装axios(get和post请求)

/ ajax模块,返回值为promise对象 / / ajax模块,返回值为promise对象 / import axios from 'axios'

左手的ㄟ右手/ 2021年07月24日 12:22/ 0 赞/ 875 阅读