一些小项目，没必要搭建脚手架，直接以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. Git Conventional Commits (Git代码提交说明规范)

    Conventional Commits (代码提交说明规范) Conventional Commits 是关于Git Commit 提交代码时, 填写的说明文字的一个规范. 这个规范提供了一套易于理 ...

  2. 【Unity3D】分离路面导航

    1 前言 ​ 导航系统中介绍了导航的基本用法,但是不能解决分离路面导航问题.如下图,胶囊体需要导航到立方体位置,但是路面不连续,烘焙(Bake)导航网格后,断开处也没有导航网格,因此,胶囊体导航到分离 ...

  3. Swoole从入门到入土(13)——HTTP服务器[配置]

    开篇之前,先复习一下如何为一个server进行配置的设置: $server->set(array( 'key' => 'value' )); 配置说明: upload_tmp_dir:设置 ...

  4. std::shared_ptr 和 std::vector 的结合使用

    #include <iostream> #include <string> #include <vector> std::shared_ptr<std::ve ...

  5. 并发慎用——System.currentTimeMillis()

    好记忆不如烂笔头,能记下点东西,就记下点,有时间拿出来看看,也会发觉不一样的感受. System.currentTimeMillis()是极其常用的基础Java API,广泛地用来获取时间戳或测量代码 ...

  6. stat模块

    # stat模块定义了常数和函数,并用这些来解释os.stat().os.fstat()和os.lstat()的结果(如果这些在该平台上存在的话). stat.S_ISREG(mode) # 判断mo ...

  7. 我的第一个项目(九) :飞机大战Vue版本塞到主页

    好家伙, 这是未进行分包的vue版本的飞机大战 效果如下:   这里说明一下,大概使用逻辑是提供一个<div> 然后在这<div>中渲染游戏 游戏主界面代码如下: 1 < ...

  8. WPF性能优化：性能分析工具

    在硬件性能不断提升的现在,软件性能依旧是开发人员关注的重点.不同类型的程序关注的具体性能指标有所不同,服务器程序注重吞吐量,游戏引擎追求渲染效率,桌面程序则关注内存消耗以及界面加载效率和流畅性.当我们 ...

  9. 【Azure 应用服务】在创建App Service时，遇见“No available instances to satisfy this request. App Service is attempting to increase capacity.”错误

    问题描述 在创建新的App Service,遇见了资源不满足当前需求的提示.详细消息为: "Code": "Conflict","Message&qu ...

  10. 智能升级：AntSK教你如何让聊天机器人实现智能联网操作

    随着人工智能技术的飞速发展,智能体已经逐步融入到我们的日常生活中.不过,要想让智能体不仅能聊天,还能接入网络实时获取信息,为我们提供更多便利,所需技术的复杂性不得不让人瞩目.今天,我将和各位分享如何在 ...