一些小项目，没必要搭建脚手架，直接以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. 多层PCB的制造工艺流程

    多层PCB的制造工艺流程 多层板制造方法有电镀通孔法以及高密度增层法两种,都是通过不同工艺的组合来实现电路板结构.其中目前采用最多的是电镀通孔法,电镀通孔法经过超过半个世纪的发展与完善,电镀通孔法无论 ...

  2. CF-928(已更新：B C E)

    CF-928 排名四千多,目前为止排名最高的一场~ E题我赛时基本上是猜的结论(但是也推了快一小时才想到有这个可能性),因此目前只能放个码在这(⊙﹏⊙) D的话问了学长思路,正在补了0-^-0 --但 ...

  3. TS内置类型与拓展

    TS内置类型与拓展 TypeScript具有类型系统,且是JavaScript的超集,其可以编译成普通的JavaScript代码,也就是说,其是带有类型检查的JavaScript. 内置类型 Type ...

  4. java常用包下载地址（非maven）

    httpclient与httpcore: http://hc.apache.org/downloads.cgi jdbc: https://dev.mysql.com/downloads/connec ...

  5. Java I/O 教程（四） FileInputStream 类

    Java FileInputStream class 从一个文件读取字节数据. 用于从图像,音频,视频等文件中读取字节类型数据. 类定义 public class FileInputStream ex ...

  6. Go 项目的文件布局

    转自 kcq 的 https://github.com/golang-standards/project-layout https://github.com/golang-standards/proj ...

  7. RAID 10磁盘阵列实践

    RAID概述 RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,利用分散读写技术来提升磁盘阵列整体的性能,同时把多个重要数据的副本同步到不同的物理硬盘设备上,从而起到了非常好的数 ...

  8. 项目实战：Qt监测操作系统物理网卡通断v1.1.0(支持windows、linux、国产麒麟系统）

    需求   使用Qt软件开发一个检测网卡的功能.  兼容windows.linux,国产麒麟系统(同为linux) Demo   windows上运行:       国产麒麟操作上运行:       功 ...

  9. 第一百一十八篇: JavaScript 原型链式继承

    好家伙,好家伙,本篇为<JS高级程序设计>第八章"对象.类与面向对象编程"学习笔记 1.原型链 原型链是JS实现"继承"的方案之一 ECMA-262 ...

  10. TensorFlow 回归模型

    TensorFlow 回归模型 首先,导入所需的库和模块.代码中使用了numpy进行数值计算,matplotlib进行数据可视化,tensorflow进行机器学习模型的构建和训练,sklearn进行多 ...