http POST请求键值对参数以及json参数

最新推荐文章于 2025-06-15 20:27:19 发布

原创最新推荐文章于 2025-06-15 20:27:19 发布 · 8.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#http #post #json格式 #键值对

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了使用HTTP POST请求时的两种参数类型：键值对格式与JSON格式，并提供了Vue中利用axios和qs库实现这两种参数类型的具体示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用post进行http请求时有2种参数类型，要根据接口切换不同的参数格式

键值对格式参数一般表现为：username=123&password=123

json格式参数一般表现为：{"username":"123","password":"123"}

以下示例代码为vue代码：

发送键值对参数：

首先npm下载axios和qs(这里是借助qs来进行键值对处理)

npm install axios --save

npm install qs--save

import axios from 'axios';
import qs from "qs";

//post键值对格式
    post(url, data) {
        return axios({
            method: "post",
            url: url,
            data: qs.stringify(data),
            timeout: 30000,
            headers: {
                "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
            },
        })
            .then(response => {
                console.log(response);//状态码处理
            })
            .then(res => {
                console.log(res);//异常处理
            });
    },

发送json参数：

json格式参数不需要qs进行处理，直接传入对象格式的数据

//post json格式
    postJson(url, data) {
        return axios({
            method: "post",
            url: url,
            data: data,
            timeout: 30000,
            headers: {
                "Content-Type": "application/json; charset=UTF-8",
            },
        })
            .then(response => {
                return checkStatus(response);
            })
            .then(res => {
                return checkCode(res);
            });
    },