使用jQuery AJAX发送数组/列表数据并解决415错误

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用jQuery AJAX发送数组/列表数据并解决415错误

2025-10-26

浏览次数：次

返回列表

使用jQuery AJAX发送数组/列表数据并解决415错误

本文详细阐述了如何通过jquery ajax向asp.net mvc控制器正确发送数组或列表类型的数据，并解决常见的“415 unsupported media type”错误。核心在于客户端需将数据序列化为json字符串并设置正确的`contenttype`，同时服务器端控制器方法需使用`[httppost]`和`[frombody]`属性来正确接收和反序列化数据。

理解AJAX发送复杂数据与415错误

在Web开发中，经常需要通过AJAX将客户端收集到的复杂数据结构（如对象数组或列表）发送到服务器端进行处理。当尝试使用jQuery AJAX发送此类数据到ASP.NET MVC控制器时，如果配置不当，可能会遇到“415 Unsupported Media Type”错误。这个错误表明服务器无法理解客户端发送的数据格式，因为它期望的是某种特定类型（通常是JSON），但接收到的数据格式不符合预期。

产生415错误的主要原因通常是客户端没有正确地将J*aScript对象序列化为服务器可以识别的格式（如JSON字符串），并且/或者没有在HTTP请求头中正确声明Content-Type。

客户端数据准备与发送

要成功发送一个J*aScript对象数组到服务器，需要确保以下两点：

数据序列化： 将J*aScript数组对象转换为JSON字符串。
内容类型声明： 告知服务器发送的数据是JSON格式。

以下是使用jQuery AJAX发送数组的正确方法：

$(function(){
    $("#btnS*e").click(function(){         

        var datos = new Array();

        // 遍历HTML表格行，收集数据并构建J*aScript对象数组
        $("#imgCurrent tr").each(function () {
            var row = $(this);
            var id = row.find("td:eq(0)").text(); // 获取第一列的文本作为ID

            var data = {
                RepositoryCatalogueID: id
            };
            datos.push(data);
        });    

        var url = "@Url.Action("EditPosition","Carrusel")"; // 获取控制器Action的URL

        $.ajax({
            url: url,
            type: 'POST',
            contentType: 'application/json; charset=utf-8', // 关键：声明发送的数据是JSON格式
            dataType: 'json', // 期望服务器返回的数据类型
            data: JSON.stringify(datos), // 关键：将J*aScript数组序列化为JSON字符串
            success: function (data) {
                // 请求成功后的处理
                $.alert({
                    icon: "~/Content/Images/success.png",
                    title: 'Restaurar Imagen',
                    content: 'Restauración exitosa.',
                });
            },
            error: function(xhr, status, error) {
                // 错误处理
                console.error("AJAX Error:", status, error);
                console.error("Response Text:", xhr.responseText);
                $.alert({
                    icon: "~/Content/Images/error.png",
                    title: '错误',
                    content: '操作失败：' + error,
                });
            }
        });
    });
});

关键点解析：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

JSON.stringify(datos)：这是将J*aScript datos数组（包含多个对象）转换为标准的JSON字符串的关键步骤。服务器端才能将其解析为对应的C#对象列表。
contentType: 'application/json; charset=utf-8'：此设置告诉服务器，请求体中的数据是JSON格式。服务器会根据这个Content-Type头来选择合适的媒体类型格式化器进行处理。原代码中的contentType: 'json'是不规范且错误的写法，应使用'application/json'。
dataType: 'json'：虽然不是解决415错误的核心，但它指示jQuery期望从服务器接收JSON格式的响应，这是一种良好的实践。

服务器端控制器接收数据

在ASP.NET MVC控制器中，为了正确接收客户端发送的JSON数据并将其绑定到C#对象列表，需要做以下配置：

using System.Collections.Generic;
using System.Web.Mvc; // 确保引入了正确的命名空间

// 定义ViewModel，与客户端发送的数据结构对应
public class CarruselViewModel
{
    public int RepositoryCatalogueID { get; set; }
    // 可以添加其他属性
}

public class CarruselController : Controller
{
    [HttpPost] // 确保此Action方法只响应HTTP POST请求
    public JsonResult EditPosition([FromBody] IEnumerable<CarruselViewModel> model)
    {
        bool success = false;
        string message = string.Empty;

        if (model != null)
        {
            // 在这里处理接收到的模型数据
            foreach (var item in model)
            {
                // 例如：保存到数据库
                // Console.WriteLine($"Received ID: {item.RepositoryCatalogueID}");
            }
            success = true;
            message = "数据接收成功！";
        }
        else
        {
            message = "未接收到有效数据。";
        }

        // 返回JSON结果
        return Json(new { success = success, message = message }, JsonRequestBeh*ior.AllowGet);
    }
}

关键点解析：

[HttpPost]属性：明确指定此Action方法只能通过HTTP POST请求访问。如果客户端发送的是GET请求，将无法匹配此方法。
[FromBody]属性：这是ASP.NET MVC（或Web API）中一个非常重要的属性。它指示框架应尝试从HTTP请求的主体中读取数据，并将其反序列化为IEnumerable类型的对象。当客户端发送Content-Type: application/json且数据为JSON字符串时，[FromBody]会与内置的JSON媒体类型格式化器协同工作，将JSON字符串解析为C#对象。

总结与注意事项

要成功通过jQuery AJAX发送数组/列表数据到ASP.NET MVC控制器并避免415错误，核心在于客户端和服务器端的协同：

客户端（jQuery AJAX）：
- 使用JSON.stringify()将J*aScript对象数组转换为JSON字符串。
- 设置contentType: 'application/json; charset=utf-8'以正确声明数据类型。
服务器端（ASP.NET MVC）：
- 在控制器Action方法上添加[HttpPost]属性。
- 在接收复杂类型参数（如IEnumerable）前添加[FromBody]属性。
- 确保ViewModel的属性名称与客户端发送的JSON数据中的键名完全匹配（区分大小写，尽管在某些配置下可能不区分）。