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

DDD
发布: 2025-10-26 11:42:35
原创
399人浏览过

使用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错误的主要原因通常是客户端没有正确地将JavaScript对象序列化为服务器可以识别的格式(如JSON字符串),并且/或者没有在HTTP请求头中正确声明Content-Type。

客户端数据准备与发送

要成功发送一个JavaScript对象数组到服务器,需要确保以下两点:

  1. 数据序列化: 将JavaScript数组对象转换为JSON字符串。
  2. 内容类型声明: 告知服务器发送的数据是JSON格式。

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

$(function(){
    $("#btnSave").click(function(){         

        var datos = new Array();

        // 遍历HTML表格行,收集数据并构建JavaScript对象数组
        $("#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), // 关键:将JavaScript数组序列化为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,
                });
            }
        });
    });
});
登录后复制

关键点解析:

序列猴子开放平台
序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

序列猴子开放平台 0
查看详情 序列猴子开放平台
  • JSON.stringify(datos):这是将JavaScript 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 }, JsonRequestBehavior.AllowGet);
    }
}
登录后复制

关键点解析:

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

总结与注意事项

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

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

遵循这些步骤,将能够稳定可靠地在客户端和服务器之间传输复杂的数据结构。如果仍然遇到问题,请检查浏览器开发者工具中的网络请求,确认请求头和请求体是否符合上述要求,并检查服务器端日志以获取更详细的错误信息。

以上就是使用jQuery AJAX发送数组/列表数据并解决415错误的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号