在ASP.NET中通过AJAX读取JSON遇阻，求解决方案

问题分析 #

当前代码存在两处核心问题：

• 前端AJAX默认以表单编码格式发送数据，而非JSON格式，后端无法正确解析
• 后端控制器方法逻辑错误，内置的静态方法是用于发送HTTP请求获取JSON，而非接收前端传来的JSON数据

前端代码修正 #

修改AJAX请求，指定JSON contentType并序列化数据：

<script>
function sendValues() {
    var message = document.getElementById('message');
    
    $.ajax({
        type: "POST",
        url: "api/FilterSubmit",
        // 指定发送内容类型为JSON
        contentType: "application/json",
        // 将数据序列化为JSON字符串
        data: JSON.stringify({
            NetworkOutput: JSON.parse(localStorage.getItem("NetworkValues")),
            arpOutput: JSON.parse(localStorage.getItem("arpValues")),
            addrOutput: JSON.parse(localStorage.getItem("addrValues")),
            fsckOutput: JSON.parse(localStorage.getItem("fsckValues")),
            vmstatOutput: JSON.parse(localStorage.getItem("vmstatValues")),
            freeOutput: JSON.parse(localStorage.getItem("freeValues")),
            serviceOutput: JSON.parse(localStorage.getItem("ServiceValues")),
            processOutput: JSON.parse(localStorage.getItem("ProcessValues")),
            topOutput: JSON.parse(localStorage.getItem("topValues")),
            PortOutput: JSON.parse(localStorage.getItem("PortValues"))
        }),
        success: function(result) {
            message.innerHTML = 'success!';
            console.log("数据已发送");
        },
        error: function(err) {
            message.innerHTML = 'failed!';
            console.error(err);
        }
    })
}
</script>

后端代码修正 #

1. 创建数据模型类 #

在AspNetCore.MariaDB.Models命名空间下创建与前端数据结构对应的模型（根据实际数据类型调整字段类型，示例用object兼容任意结构，建议替换为具体类型）：

namespace AspNetCore.MariaDB.Models
{
    public class FilteredScripts
    {
        public object NetworkOutput { get; set; }
        public object arpOutput { get; set; }
        public object addrOutput { get; set; }
        public object fsckOutput { get; set; }
        public object vmstatOutput { get; set; }
        public object freeOutput { get; set; }
        public object serviceOutput { get; set; }
        public object processOutput { get; set; }
        public object topOutput { get; set; }
        public object PortOutput { get; set; }
    }
}

2. 修正控制器方法 #

删除错误的静态请求方法，改为接收前端JSON数据：

using AspNetCore.MariaDB.Models;
using Microsoft.AspNetCore.Mvc;
using System;

namespace AspNetCore.MariaDB.Controllers
{
    [ApiController] // 自动处理JSON绑定与模型验证
    [Route("api/[controller]")]
    public class ButtonController : ControllerBase // 继承ControllerBase更适合API场景
    {
        [HttpPost("FilterSubmit")]
        public IActionResult ButtonClickSub([FromBody] FilteredScripts requestData)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            // 读取数据并输出到控制台
            Console.WriteLine("收到NetworkOutput数据：");
            Console.WriteLine(System.Text.Json.JsonSerializer.Serialize(requestData.NetworkOutput));
            // 其他字段同理处理...

            // 后续可添加过滤等业务逻辑

            return Ok("数据接收成功");
        }
    }
}

关键说明 #

• [ApiController]特性自动启用JSON输入绑定、模型验证等API专属功能
• [FromBody]标记告诉ASP.NET从请求体中解析JSON数据到模型对象
• 前端必须指定contentType: "application/json"并使用JSON.stringify()序列化数据，否则后端无法正确解析

内容的提问来源于stack exchange，提问作者Marco