怎么传递application/x-www-form-urlencoded参数

最新推荐文章于 2024-05-14 17:58:38 发布

是千千千熠啊

最新推荐文章于 2024-05-14 17:58:38 发布

阅读量1.1k

点赞数 12

分类专栏： vue js ajax 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46092900/article/details/136511615

版权

vue 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中，如何通过qs库的stringify方法和原生的URLSearchParams对象来序列化和传递application/x-www-form-urlencoded格式的参数，以及两者在不同情况下的使用示例。

摘要由CSDN通过智能技术生成

vue中post传递application/x-www-form-urlencoded参数

方法1：运用 qs.stringfy()

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。主要用于将url后面的值转换为对象，或者将对象拼接未url后面的值

1.qs安装

npm install qs

2.qs应用

qs.stringify()的使用

运用 qs.stringfy() 将对象序列化成 URL 的形式

// 1. 导入 qs
import qs from 'qs'

在methods方法

 const param={
        'user':username,
        'usercode':usercode,
        'useremail':useremail,
        'useriphone':'useriphone',
      }
  console.log(qs.stringify(param))
  //使用接口方法：例如接口function名为：updateinfo
   updateinfo(qs.stringify(param)).then(res => {
   
   }).catch()

方法2：运用 new URLSearchParams()

如果传递值为下列这种类型，则无法使用qs进行实例化
在这里插入图片描述

以上述为例：

 let param = new URLSearchParams(); //URLSearchParams定义了一些实用的方法来处理 URL 的查询字符串
 let info = [{
        'user':username,
        'usercode':usercode,
        'useremail':useremail,
        'useriphone':'useriphone',
      }]
  param.append("info",  JSON.stringify(info));
  //使用接口方法：例如接口function名为：updateinfo
   updateinfo(param).then(res => {
   
   }).catch()

备注:同样，方法1中的键值对可以用方法2进行编写，但方法2中不可用方法1方式编写
使用方法2对方法1进行编写，与方法1效果相同

 let param = new URLSearchParams();
  param.append("user",  username);
  param.append("usercode",  usercode);
  param.append("useremail",  useremail);
  param.append("useriphone",  useriphone);
  //使用接口方法：例如接口function名为：updateinfo
   updateinfo(param).then(res => {
   
   }).catch()