ajax如何提交put请求，ajax提交put请求方法

在前后端分离的架构中,AJAX 提交 PUT 请求是 RESTful API 交互的核心场景之一，许多开发者在尝试使用原生 XMLHttpRequest 或 jQuery 发送 PUT 请求时，常遇到服务器返回 405 Method Not Allowed 或数据无法正确解析的问题，核心上文小编总结是：浏览器原生 AJAX 支持 PUT 请求，但关键在于正确设置 HTTP 头部 Content-Type 为 application/json，并将数据序列化为 JSON 字符串，同时需确保后端服务器允许该 HTTP 方法并正确解析请求体，若使用 jQuery，需注意其默认行为对 PUT/DELETE 的支持限制，通常建议直接使用 Fetch API 或 Axios 等现代库以获得更简洁、标准的体验。

原生 XMLHttpRequest 实现 PUT 请求

原生 XMLHttpRequest (XHR) 是 AJAX 技术的基石，要发送 PUT 请求，首先需要创建 XHR 实例，然后调用 open 方法指定方法为 "PUT"，URL 为接口地址，同步参数设为 false（异步请求推荐），必须通过 setRequestHeader 方法显式设置 Content-Type 为 "application/json; charset=utf-8"，这一步至关重要，它告知服务器请求体的数据格式，调用 send 方法，传入经过 JSON.stringify() 处理的对象数据。

var xhr = new XMLHttpRequest();
xhr.open("PUT", "/api/users/123", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(JSON.stringify({ name: "Updated Name", age: 30 }));

这种方式的优点是无需依赖任何第三方库,适用于轻量级项目或对兼容性有严格要求的场景，代码较为繁琐，错误处理机制也需要手动完善，容易因疏忽头部设置导致后端接收失败。

jQuery 中的 PUT 请求陷阱与解决方案

jQuery 曾长期主导前端开发，但其 ajax 方法在处理 PUT 和 DELETE 请求时存在历史遗留问题，早期版本的 jQuery 默认将非 GET/POST 请求转换为 POST，并在头部添加 _method=PUT 作为模拟，这依赖于后端框架（如 Spring MVC 的 HiddenHttpMethodFilter）的支持，若后端未配置此类过滤器，直接发送 PUT 请求可能会失败。

在现代 jQuery 版本中，虽然可以直接发送 PUT，但为了保持最佳实践，建议显式指定 type 为 "PUT"，并同样设置 headers 中的 Content-Type，jQuery 的 data 参数若传入对象，默认会序列化为查询字符串格式（application/x-www-form-urlencoded），这与 RESTful API 通常要求的 JSON 格式不符，必须手动序列化数据并设置头部。

$.ajax({
    url: "/api/users/123",
    type: "PUT",
    contentType: "application/json",
    data: JSON.stringify({ name: "Updated Name", age: 30 }),
    success: function(response) {
        console.log("Update successful", response);
    },
    error: function(xhr, status, error) {
        console.error("Update failed", error);
    }
});

此方案强调了数据序列化与头部设置的一致性,避免了因格式不匹配导致的解析错误。

现代方案：Fetch API 与 Axios 的优选

随着 ES6 的普及，Fetch API 成为原生 AJAX 的现代替代品，它基于 Promise，语法更简洁，且原生支持 PUT 请求，无需额外配置即可发送 JSON 数据。

fetch("/api/users/123", {
    method: "PUT",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "Updated Name", age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

Fetch API 的优势在于其标准化和轻量级，但需注意它不会自动处理 HTTP 错误状态（如 4xx, 5xx），需要手动检查 response.ok。

对于企业级应用,Axios 因其自动 JSON 序列化、拦截器功能和广泛的浏览器兼容性而备受推崇，Axios 在发送 PUT 请求时，只需传入数据对象，它会自动将其序列化为 JSON 并设置正确的头部，极大简化了开发流程。

axios.put("/api/users/123", { name: "Updated Name", age: 30 })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

Axios 的封装性使其成为处理复杂 HTTP 交互的首选，特别是在需要统一处理请求头、错误拦截和取消请求的场景中。

后端配合与常见错误排查

前端正确发送 PUT 请求只是第一步，后端服务器必须正确配置以接受该请求，常见的错误包括：

1. 405 Method Not Allowed：服务器未启用 PUT 方法，或路由配置仅允许 GET/POST，需检查后端框架的路由定义。
2. 415 Unsupported Media Type：前端未设置 Content-Type 为 application/json，或后端未配置相应的消息转换器。
3. 数据解析为空：前端发送的数据未正确序列化，或后端未正确绑定请求体，确保前后端数据格式严格一致。

相关问答

Q1: 为什么使用 jQuery 发送 PUT 请求时，后端收到的参数是 null？

A: 这通常是因为 jQuery 默认将 data 对象序列化为查询字符串格式，而后端期望的是 JSON 格式，解决方案是手动使用 JSON.stringify() 序列化数据，并通过 contentType: "application/json" 设置请求头，确保后端能正确解析 JSON 数据。

Q2: Fetch API 发送 PUT 请求后，如何获取响应头中的自定义信息？

A: Fetch API 返回的 Response 对象包含 headers 属性，这是一个 Headers 对象，可以通过 response.headers.get("header-name") 方法获取特定响应头的值，若后端在响应头中设置了 "X-Request-Id"，可通过 response.headers.get("X-Request-Id") 获取。

互动环节

在实际开发中,你是否遇到过 AJAX 提交 PUT 请求时的奇葩问题？欢迎在评论区分享你的踩坑经历和解决方案，我们一起交流进步。