一些小项目，没必要搭建脚手架，直接以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. WinRT: 可能是 Windows 上最好用的 Native ABI 和远程调用方案

    前言 Windows 自从很久以来就有一个叫做 COM 的 Native ABI.这是一套面向对象的 ABI,在此之上 Windows 基于 COM ABI 暴露了各种各样的 API,例如 Manag ...

  2. 2021-06-28 CSS变量设置颜色

    说明 css变量只能以[–]开头. 距离当前dom元素层级最近的父元素作用域css变量的值更容易生效. css变量在css文件中只能以var()函数来使用. 代码 <!DOCTYPE html& ...

  3. docker部署fastdfs并在Django中集成

    拉取Fastdfs镜像 docker pull delron/fastdfs 构建Tracker容器 是在Linux环境下,使用docker镜像构建tracker容器,用于启动跟踪服务器,起到调度的作 ...

  4. canal实现mysql跨机房备份

    背景介绍 跨机房数据库数据备份 数据库增量异构系统分发(cache,mq等) 数据内容聚合分析组件 摘录作者的描述 原理图 canal 模拟 MySQL slave 的交互协议,伪装自己为 MySQL ...

  5. JS中Date和时间戳转换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. 【Azure 存储服务】使用POST方式向Azure Storage Queue中插入Message的办法

    问题描述 使用POST HTTP Request, 如何向Azure Storage Queue中写入Message呢?例如使用CURL发送POST指令是否可以呢? CURL -H "Con ...

  7. Vue3学习（二十一）- 文档管理页面布局修改

    写在前面 按照国际惯例,要先聊下生活,吐槽一番,今天是2月14日,也是下午听老妈说,我才知道! 现在真的是对日期节日已经毫无概念可言,只知道星期几. 现在已经觉得写博客也好,学习文章也罢,和写日记一样 ...

  8. Docker的使用记录

    开始 这是第一个尝试在Leanote上面编写文章,我觉得最重要的事情就是能够保证md文件是能够移植的,否则如果这个软件不靠谱的话,我还能把文章移动到别的地方去.所以先写一篇文章看看效果如何,方便不方便 ...

  9. C++ STL 容器 list类型

    C++ STL 容器 list类型 list对于异常支持很好,要么成功,要么不会发生什么事情 以下是 std::list 在异常处理方面表现良好的几个原因: 动态内存管理:std::list 使用动态 ...

  10. Android---Android 开发四大组件

    Android 应用程序组件 应用程序组件是一个Android应用程序的基本构建块.这些组件由应用清单文件松耦合的组织.AndroidManifest.xml描述了应用程序的每个组件,以及他们如何交互 ...