Vue中Axios与jQuery POST格式差异及CSHTML读取适配问题

针对你遇到的Axios提交JSON格式数据后端无法用Request["action"]读取，以及如何让Axios模拟jQuery表单格式提交的问题，我分两种场景给出解决方案：

一、直接读取Axios提交的JSON数据 #

Axios默认会把请求体序列化为JSON格式，后端无法直接通过Request["key"]获取值，需要先读取请求的原始JSON内容，再解析成对象。在ASP.NET Razor（CSHTML）中可以这样做：

1. 读取请求流并解析为动态对象：

using (var reader = new StreamReader(Request.InputStream))
{
    string jsonBody = reader.ReadToEnd();
    // 借助Newtonsoft.Json解析JSON（需先安装NuGet包）
    dynamic data = JsonConvert.DeserializeObject(jsonBody);
    string action = data.action;
    string para = data.para;
    // 后续业务逻辑处理
}

2. 更规范的强类型解析方式：
   先定义匹配请求结构的模型类：

public class RequestModel
{
    public string para { get; set; }
    public string action { get; set; }
}

再读取并解析：

using (var reader = new StreamReader(Request.InputStream))
{
    string jsonBody = reader.ReadToEnd();
    RequestModel model = JsonConvert.DeserializeObject<RequestModel>(jsonBody);
    string action = model.action;
    string para = model.para;
}

二、让Axios以jQuery的表单格式提交数据 #

如果想让Axios和jQuery一样，提交application/x-www-form-urlencoded格式的表单数据，有三种实用方法：

方法1：使用原生URLSearchParams API #

const params = new URLSearchParams();
params.append('para', 'test_Axios');
params.append('action', 'test');

axios.post('./test.cshtml', params)
  .then(res => { /* 处理响应 */ })
  .catch(err => { /* 处理错误 */ });

Axios会自动识别URLSearchParams对象，自动设置正确的Content-Type请求头。

方法2：使用qs库序列化数据 #

先通过npm install qs安装库，再在代码中使用：

import qs from 'qs';

axios.post('./test.cshtml', qs.stringify({ 
  para: 'test_Axios', 
  action: 'test' 
}))
.then(res => { /* 处理响应 */ });

这种方式适合处理嵌套结构的参数，序列化更可靠。

方法3：手动拼接参数（适合简单场景） #

axios.post('./test.cshtml', 'para=test_Axios&action=test', {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(res => { /* 处理响应 */ });

这种方式需要手动指定请求头，适合参数较少的情况。

修改后，后端就可以像处理jQuery请求一样，直接用var action = Request["action"];读取参数了。

内容的提问来源于stack exchange，提问作者Fred Morten Solbakken