一些小项目，没必要搭建脚手架，直接以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. NC24870 [USACO 2009 Dec G]Video Game Troubles

    题目链接 题目 题目描述 Farmer John's cows love their video games! FJ noticed that after playing these games th ...

  2. 端口碰撞Port Knocking和单数据包授权SPA

    端口碰撞技术 Port knocking 从网络安全的角度,服务器开启的端口越多就越不安全,因此系统安全加固服务中最常用的方式,就是先关闭无用端口,再对提供服务的端口做访问控制.而作为远程管理与维护的 ...

  3. 新零售SaaS架构：订单履约系统的应用架构梳理

    订单履约系统的核心能力 通过分析订单履约的全流程和各个业务活动,我们可以梳理出订单履约的核心业务链路,基于业务链路,我们抽象出订单履约系统的三大系统能力,分别为履约服务表达.履约调度.物流配送. 履约 ...

  4. 命令行解析parse.parse_know_args()

    简介 在接受到多余的命令行参数时不报错,只把第一个参数作为当前使用的命令参数, 剩余部分留给其它程序使用,返回一个tuple类型的命名空间和一个保存着余下的命令行字符的list 示例 import a ...

  5. 手动下载sdk及avd

    有时候下载sdk的时候报各种错误导致无法下载,如图 那么可以离线下载,到浏览器或IDM中下载图中提示的url链接,将第一个下载的包即sources的解压后放到SDK目录下的sources目录,并重命名 ...

  6. Html飞机大战(十): 消灭敌机

    好家伙,本篇是带着遗憾写完的. 很遗憾,我找了很久,找到了bug但并没有成功修复bug 再上一篇中我们看到 子弹射中了敌机,但是敌机并没有消失,所以这篇我们要来完善这个功能 按照惯例我们来捋一下思路: ...

  7. 《Document-level Relation Extraction as Semantic Segmentation》论文阅读笔记

    原文 代码 摘要 本文研究的是文档级关系抽取,即从文档中抽取出多个实体之间的关系.现有的方法主要是基于图或基于Transformer的模型,它们只考虑实体自身的信息,而忽略了关系三元组之间的全局信息. ...

  8. 3D模型+BI分析，打造全新的交互式3D可视化大屏开发方案

    背景介绍 在数字经济建设和数字化转型的浪潮中,数据可视化大屏已成为各行各业的必备工具.然而,传统的数据大屏往往以图表和指标为主,无法真实地反映复杂的物理世界和数据关系.为了解决这个问题,3D模型可视化 ...

  9. git 撤销本地 git提交的commit记录 （git reset --hard ID）

    git 撤销本地 git提交的commit记录 (git reset --hard ID) ID的获取方法 这个id,就是你要退回的那个id,我这里截图的时候已经回退了,正常是你提错了的下面那个git ...

  10. 突破英语听说要塞-连读与变音 MP3 免费下载

    学英语 连读 弱读,就是这本书最不错了. 网上这个音频 有下载,但是不好找,特此分享,拿走不谢. https://115.com/s/swns19o3359?password=df62&# 突 ...