本教程详细介绍了如何使用 jquery ajax 向后端控制器发送数组或列表数据，并解决常见的 http 415（unsupported media type）错误。文章将重点讲解客户端数据序列化（`json.stringify`）、正确的 `contenttype` 设置，以及服务器端（如 asp.net mvc/core）控制器动作的 `[httppost]` 属性和 `[frombody]` 模型绑定，确保数据传输的顺畅与成功。
在现代 Web 应用开发中，通过 AJAX 技术异步地向服务器发送复杂数据（如对象数组或列表）是常见的需求。然而，在实现这一功能时，开发者有时会遇到 HTTP 415 “Unsupported Media Type” 错误，这通常意味着服务器无法解析客户端发送的数据格式。本文将深入探讨如何正确配置 jQuery AJAX 请求和服务器端控制器，以成功传输数组数据并避免此错误。
理解 HTTP 415 错误及其原因
HTTP 415 状态码表示服务器无法处理请求中附带的实体，因为请求的媒体类型（Content-Type）不被服务器所支持。在发送 JSON 数据时，这通常是由于以下一个或多个原因造成的：
数据未正确序列化： 客户端尝试发送 JavaScript 对象，但未将其转换为标准的 JSON 字符串格式。contentType 设置不当： AJAX 请求头中的 Content-Type 未正确设置为 application/json，导致服务器无法识别数据类型。服务器端配置缺失： 服务器端控制器动作未正确标记为处理 POST 请求，或者未配置为从请求体中绑定 JSON 数据。
客户端：使用 jQuery AJAX 发送数组数据
要通过 jQuery AJAX 成功发送数组或对象列表，需要关注 data 参数的序列化和 contentType 属性的设置。
1. 数据收集与结构化
首先，需要从页面中收集数据并将其组织成 JavaScript 数组，其中每个元素都是一个 JavaScript 对象。例如，从表格行中提取数据：
$(function() { $("#btnSave").click(function() { var datos = []; // 使用数组字面量更简洁 $("#imgCurrent tr").each(function() { var row = $(this); var id = row.find("td:eq(0)").text(); // 获取第一列文本作为ID var dataItem = { RepositoryCatalogueID: id }; datos.push(dataItem); }); // ... 后续AJAX请求 });});
2. 核心解决方案：数据序列化与 contentType
解决 415 错误的关键在于确保发送的数据是有效的 JSON 字符串，并告知服务器其类型。
JSON.stringify()： 这是 JavaScript 内置的方法，用于将 JavaScript 值（通常是对象或数组）转换为 JSON 字符串。contentType: ‘application/json; charset=utf-8’： 这告诉服务器请求体中的数据是 JSON 格式，并指定了字符编码。
将上述两点应用到 jQuery AJAX 请求中：
$(function() { $("#btnSave").click(function() { var datos = []; $("#imgCurrent tr").each(function() { var row = $(this); var id = row.find("td:eq(0)").text(); var dataItem = { RepositoryCatalogueID: id }; datos.push(dataItem); }); var url = "@Url.Action("EditPosition", "Carrusel")"; // 确保URL正确 $.ajax({ url: url, type: 'POST', // 核心改动：设置正确的 Content-Type contentType: 'application/json; charset=utf-8', // 核心改动：将数据对象序列化为 JSON 字符串 data: JSON.stringify(datos), success: function(response) { // 根据实际后端返回的数据结构处理 if (response.success) { // 假设后端返回一个包含 success 属性的对象 $.alert({ icon: "~/Content/Images/success.png", title: '操作成功', content: '数据保存成功。', }); } else { $.alert({ icon: "~/Content/Images/error.png", title: '操作失败', content: response.message || '数据保存失败。', }); } }, error: function(xhr, status, error) { // 错误处理 console.error("AJAX Error:", status, error, xhr.responseText); $.alert({ icon: "~/Content/Images/error.png", title: '请求失败', content: '服务器请求失败，请稍后再试。', }); } }); });});
注意事项：
contentType: ‘json’ 是 jQuery 的一个快捷方式，它会自动将 data 转换为 application/x-www-form-urlencoded 或 application/json，但为了明确性和避免潜在问题，建议使用完整的 application/json; charset=utf-8。在 success 回调中，data 参数是服务器返回的响应。如果服务器返回 JSON，jQuery 会自动将其解析为 JavaScript 对象。
服务器端：ASP.NET MVC/Core 控制器配置
在服务器端（以 ASP.NET MVC 或 ASP.NET Core 为例），控制器动作也需要进行相应的配置，以便正确接收和绑定 JSON 格式的数组数据。
1. [HttpPost] 属性
确保你的控制器动作明确地标记为处理 POST 请求。这是防止方法被 GET 请求意外调用的标准做法。
2. [FromBody] 属性
[FromBody] 属性指示模型绑定器从请求体中读取数据，并尝试将其反序列化为指定类型的对象。对于 JSON 数据，这通常是必需的。
3. 定义模型
确保你有一个与客户端发送数据结构相匹配的 C# 模型类。例如，如果客户端发送 { RepositoryCatalogueID: id } 对象的数组，那么 C# 模型应该如下：
// CarruselViewModel.cspublic class CarruselViewModel{ public int RepositoryCatalogueID { get; set; }}
然后，在控制器动作中，接收 IEnumerable：
using Microsoft.AspNetCore.Mvc; // 或 System.Web.Mvcpublic class CarruselController : Controller{ [HttpPost] // 确保只响应 POST 请求 public JsonResult EditPosition([FromBody] IEnumerable 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 }); }}
重要提示：
[FromBody] 属性告诉 ASP.NET 框架从请求体中解析数据。如果没有它，框架会尝试从 URL、表单数据等位置查找参数，导致无法正确绑定 JSON 数组。ASP.NET Core 默认支持 JSON 输入格式化器。对于较旧的 ASP.NET MVC 版本，可能需要确保已安装并配置了 Web API 的 JSON 格式化器（通常随 Microsoft.AspNet.WebApi.WebHost 包提供）。
总结与最佳实践
要成功使用 jQuery AJAX 发送数组数据并避免 415 错误，请遵循以下关键点：
客户端数据序列化： 始终使用 JSON.stringify(yourDataArray) 将 JavaScript 数组或对象转换为 JSON 字符串。设置正确的 contentType： 在 AJAX 请求中明确指定 contentType: ‘application/json; charset=utf-8’。服务器端 [HttpPost] 属性： 确保控制器动作标记有 [HttpPost] 属性。服务器端 [FromBody] 属性： 使用 [FromBody] 属性指示模型绑定器从请求体中解析 JSON 数据到你的 C# 模型（如 IEnumerable）。匹配数据结构： 客户端发送的 JSON 结构应与服务器端 C# 模型类的属性和类型相匹配。
通过遵循这些步骤，你将能够有效地在客户端和服务器之间传输复杂的数组数据，从而构建健壮且高效的 Web 应用程序。在开发过程中，利用浏览器的开发者工具（网络标签页）检查请求和响应的头部与负载，是调试此类问题的有效方法。
以上就是使用 jQuery AJAX 发送数组数据并解决 415 错误指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588514.html
微信扫一扫 
支付宝扫一扫 
