qs使用：html中使用、vue中使用

最新推荐文章于 2022-06-09 19:39:05 发布

于光yuguang

最新推荐文章于 2022-06-09 19:39:05 发布

阅读量757

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xixiyuguang/article/details/119607462

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html中使用

注意Qs的书写

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>

let qs = Qs;

console.log(qs);

console.log(Qs.stringify({ pagenum: 1,pagesize: 10 }));


console.log(Qs.parse('pagenum=1&pagesize=10'));

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  
</head>

<body>
    <div id="app">
        <el-button type="primary" size='small' @click="testQs">testQs</el-button> <br><br>
        <el-button type="primary"  size='small' @click="getParamsTest">getParamsTest请求测试,(url拼接)</el-button><br><br>
        <el-button type="primary"  size='small' @click="getDataTest">getDataTest请求测试 </el-button><br><br>
        <el-button type="primary"  size='small' @click="postJsonTest">postJsonTest</el-button><br><br>
        <el-button type="primary"  size='small' @click="postParamsTest">postParamsTest</el-button><br><br>
        <el-button type="primary"  size='small' @click="postFormDataTest">postFormDataTest</el-button><br><br>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> 

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {

            };
        },
        methods: {
            testQs(){
                let qs = Qs;
                console.log(qs);
                console.log(Qs.stringify({
                        pagenum: 1,
                        pagesize: 10
                    }));
                    console.log(Qs.parse('pagenum=1&pagesize=10'));
            },
            /**
             * get请求，params拼接参数
             * 请求头携带参数
             */
            getParamsTest() {
                axios({
                    url: 'http://127.0.0.1:8888/api/private/v1/login',
                    method: 'get',
                    params: {
                        pagenum: 1,
                        pagesize: 10
                    },
                    headers: { 'Authorization': '66666'  },
                }).then(res => {
                    this.$message.success('请求成功')
                    console.log(res)
                })
            },
            /**
             * get请求不支持表单提交
             */
            getDataTest() {              
                axios({
                    url: 'http://127.0.0.1:8888/api/private/v1/login',
                    method: 'get',
                    data: Qs.stringify({
                        pagenum: 1,
                        pagesize: 10
                    })
                }).then(res => {
                    this.$message.success('请求成功')
                    console.log(res)
                })
            },
           /**
             * post请求，post json参数
             * Content-Type: application/json;charset=utf-8
             */
             postJsonTest() {              
                axios({
                    url: 'http://127.0.0.1:8888/api/private/v1/login',
                    method: 'post',
                    data:  {
                        pagenum: 1,
                        pagesize: 10
                    } 
                }).then(res => {
                    this.$message.success('请求成功')
                    console.log(res)
                })
            },
             /**
             * post请求，post params参数，url拼接
             */
             postParamsTest() {              
                axios({
                    url: 'http://127.0.0.1:8888/api/private/v1/login',
                    method: 'post',
                    params:  {
                        pagenum: 1,
                        pagesize: 10
                    } 
                }).then(res => {
                    this.$message.success('请求成功')
                    console.log(res)
                })
            },
             /**
             * post请求，post FormData，表单提交，即pagenum=1&pagesize=10
             * Content-Type: application/x-www-form-urlencoded
             */
             postFormDataTest() {              
                axios({
                    url: 'http://127.0.0.1:8888/api/private/v1/login',
                    method: 'post',
                    data:  Qs.stringify({
                        pagenum: 1,
                        pagesize: 10
                    } )
                }).then(res => {
                    this.$message.success('请求成功')
                    console.log(res)
                })
            }
        },
    });
</script>

</html>
</script>

</html>

于光yuguang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qs使用：html中使用、vue中使用

html中使用注意Qs的书写<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>let qs = Qs;console.log(qs);console.log(Qs.stringify({ pagenum: 1,pagesize: 10 }));console.log(Qs.parse('pagenum=1&pagesize=10'));...
复制链接

扫一扫