一些小项目，没必要搭建脚手架，直接以CDN的方式引入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

</head>

<body>

    <div>

    </div>

    <script type="text/javascript">

        //一般引入qs库都赋值为qs，不过浏览器全局引入的是 window.Qs对象，

        //所以直接用 qs.stringify() 会报 qs undefined

        //方式1：var qs = Qs  qs.stringify()

        //方式2：Qs.stringify()

        var qs = Qs

        // 配置post的请求头

        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

        // qs.stringify() 这里可以做一下封装

        axios.post('url', qs.stringify({

            id: 1,

            name: 'lxw'

        })).then(function (res) {

            // 返回 Promise对象数据

        })

    </script>

</body>

</html>

qs的一些使用方法

qs.parse

qs.parse 方法可以把一段格式化的字符串转换为对象格式，比如

let url = 'http://localhost/index.htm?a=1&b=2&c=&d=xxx&e';

let data = qs.parse(url.split('?')[1]);

// data的结果是

{

    a: 1,

    b: 2,

    c: '',

    d: xxx,

    e: ''

}

qs.stringify

基本用法

qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。

let params = { c: 'b', a: 'd' };

qs.stringify(params)

// 结果是

'c=b&a=d'

排序

甚至可以对格式化后的参数进行排序：

qs.stringify(params, (a,b) => a.localeCompare(b))

// 结果是

'a=b&c=d'

指定数组编码格式

let params = [1, 2, 3];

// indices(默认)

qs.stringify({a: params}, {

    arrayFormat: 'indices'

})

// 结果是

'a[0]=1&a[1]=2&a[2]=3'

// brackets

qs.stringify({a: params}, {

    arrayFormat: 'brackets'

})

// 结果是

'a[]=1&a[]=2&a[]=3'

// repeat

qs.stringify({a: params}, {

    arrayFormat: 'repeat'

})

// 结果是

'a=1&a=2&a=3'

处理json格式的参数

在默认情况下，json格式的参数会用 [] 方式编码，

let json = { a: { b: { c: 'd', e: 'f' } } };

qs.stringify(json);

//结果 'a[b][c]=d&a[b][e]=f'

但是某些服务端框架，并不能很好的处理这种格式，所以需要转为下面的格式

qs.stringify(json, {allowDots: true});

//结果 'a.b.c=d&a.b.e=f'

CDN 引入 axios 和 qs 及其使用方法的更多相关文章

  1. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  2. 关于在vue-cli脚手架中使用CDN引入element-ui不成功的坑

    在前端开发过程中,为了减少最后打包出来的体积,我们会用到cdn引入一些比较大的库来解决. 常见我们引入的element-ui库,在最近使用cdn引入时,无论如何都引入不成功,其他的如Vue.vue-r ...

  3. vue 搭建框架到安装插件依赖，Element、axios、qs等

    一.使用vue 单页面开发,首先要安装好本地环境 步骤如下: 1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --reg ...

  4. vue，elementUI，less，axios，qs的安装及打包

    目前一直使用vue去搭建项目,我个人习惯用Visual Studio Code编辑工具,所以下面的所有操作都是在这个编辑器中 在安装的时候,为了避免安装过程中出错,你最好安装了淘宝镜像(官网:http ...

  5. axios的Get和Post方法封装及Node后端接收数据

    最近有做一个Vue的小项目,其中用到了尤大大推荐使用的axios,但是使用的过程中遇到了各种各样的问题,所以这次也是将一些心得分享出来. 安装的流程我就简单说一下下吧,在一个自己新建的文件夹中命令行中 ...

  6. html中引入调用另一个html的方法

    html中引入调用另一个html的方法,尝试了好几种,都列出来: 其中第一种是最好的,其他的方法,可以尝试看看,是不是适合你当前项目 一.div+$("#page1").load( ...

  7. vue项目引入第三方js插件，单个js文件引入成功，使用该插件方法时报错（问题已解决）

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  8. 3.vue引入axios全局配置

    前言: Vue官方推荐使用axios来进行异步访问. axios文档参考:axios中文文档 开始搭建: 1.引入axios (1)打开终端 win+R (2)切换到项目路径: g: cd Webap ...

  9. vue-cli 引入axios

    写文章注册登录     首页 下载App × vue-cli 引入axios及跨域使用 星球小霸王 关注 2017.10.04 16:40* 字数 504 阅读 13038评论 2喜欢 18 使用 c ...

  10. php Yaf_Loader::import引入文件报错的解决方法

    php Yaf_Loader::import引入文件报错的解决方法 改下配置文件就行<pre>yaf.use_spl_autoload=1</pre> 也可以PHP动态修改 毕 ...

随机推荐

  1. NC14704 美味菜肴

    题目链接 题目 题目描述 小明是个大厨,早上起来他开始一天的工作.他所在的餐厅每天早上都会买好 \(n\) 件食材(每种食材的数量可以视为无限),小明从到达餐厅开始就连续工作 \(T\) 时间.每道菜 ...

  2. Swoole从入门到入土(27)——协程[协程容器]

    这一章开始,我们要开始全方位讨论Swoole为我们提供的协程机制.在swoole中所有的协程必须在协程容器里面创建(Swoole\Coroutine\Scheduler),Swoole 程序启动的时候 ...

  3. Fiddler捕获Java发送的HttpURLConnection请求

    1.说明 平常使用Fiddler抓包工具查看浏览器的请求和响应信息很方便, 但有时候我们也需要拦截java代码执行的http请求. 以便更好的调试程序.具体方法如下: 2.编写Java代码 // 配置 ...

  4. 【树莓派】拷贝系统到新SD卡（系统备份/部署到另一台树莓派上）适用ubuntu 20.04.3

    本教程适用ubuntu 20.04.3 其他版本也大同小异.这种方法能更快的将系统部署下去,如果重新安装一遍加上各种配置相信你会比较疯狂即使做了自动化脚本! 一.树莓派sd卡拷贝 把旧SD卡插入树莓派 ...

  5. 一个简单的Dockerfile多阶段构建go项目

    From golang:1.16-alpine3.13 AS builder WORKDIR /app COPY . . RUN go build -o main main.go From alpin ...

  6. Advanced .Net Debugging 2：CLR基础

    一.简介 这是2024新年后我的第一篇文章,也是我的<Advanced .Net Debugging>这个系列的第二篇文章.这篇文章告诉我们为了进行有效的程序调试,我们需要掌握哪些知识.言 ...

  7. sql注入简单初

    import requests,sys,time from PyQt5.QtWidgets import * from PyQt5.QtGui import QIcon from threading ...

  8. 【LeetCode链表#6】移除链表元素

    移除链表元素 题目 力扣题目链接(opens new window) 题意:删除链表中等于给定值 val 的所有节点. 示例 1: 输入:head = [1,2,6,3,4,5,6], val = 6 ...

  9. Centos8上安装Redis5.X

    一.下载Redis 下载地址:wget http://download.redis.io/releases/redis-5.0.7.tar.gz 解压:tar -xzvf redis-5.0.7.ta ...

  10. 如何提高UI自动化稳定性？

    1尽量使用相对路径的xpath表达式定位元素 2查找元素优先使用显示等待方式 3用例与用例之间避免产生依赖,用例可以单独运行 4用例执行结束之后要对测试场景进行还原,避免影响到其他用例的执行 5脚本执 ...