如何使用 AJAX 和 JQuery 使用 JSON 数据实现 PUT 调用？

Posted 2023-02-19

【中文标题】如何使用 AJAX 和 JQuery 使用 JSON 数据实现 PUT 调用？

【英文标题】：How to implement a PUT call with JSON data using AJAX and JQuery?

【发布时间】：2012-10-14 22:35:39

【问题描述】：

我环顾四周并尝试了许多不同的方法，但似乎无法将实际数据传递给控制器​​的函数。

这里有一些代码：

        var URL = "/Timesheet/Timesheet/UpdateEntry";

        var dataObject =  'newWeekEntry': newEntry, 'oldWeekEntry': oldEntry ;

        alert(JSON.stringify(dataObject));

        $.ajax(
            url: URL,
            type: 'PUT',    
            data: JSON.stringify(dataObject),
            dataType: 'json',
            success: function(result) 
                alert("success?");
            
        );

newEntry 和 oldEntry 都是对象。

alert 行输出以下内容（删除了一些属性，为简洁起见）：

"newWeekEntry":"MondayHours":2,"TuesdayHours":2,"WednesdayHours":5,"ThursdayHours":5,"FridayHours":"4","SaturdayHours":0,"SundayHours":0,"oldWeekEntry":"MondayHours":2,"TuesdayHours":2,"WednesdayHours":5,"ThursdayHours":5,"FridayHours":2,"SaturdayHours":0,"SundayHours":0

当我调试我的控制器动作（“UpdateEntry”）时，这两个参数填充了TimesheetEntry类默认参数（0）。

我是否正确传递了这个？

【问题讨论】：

您能否详细说明您所说的“当我调试控制器操作 ("UpdateEntry") 时，这两个参数都填充了 TimesheetEntry 类默认参数 (0)。”？您在服务器上使用什么（即 Rails）以及如何将服务器上的 JSON 转换为 TimesheetEntry？

dataType 属性仅在您从服务器获取数据时使用。向服务器发送数据时，您应该将contentType 设置为application/json。

感谢 InPursuit！那解决了它。您想将此添加为答案，我可以接受吗？

当然，很高兴我能帮上忙！

【参考方案1】：

dataType 属性仅在您从服务器获取数据时使用。向服务器发送数据时，您应该将contentType 设置为application/json。

【讨论】：

谢谢你救了我的命！ :)

【参考方案2】：

使用标头："X-HTTP-Method-Override": "PUT" 并覆盖 POST 请求类型。它适用于我的项目...

$.ajax(
    type: 'POST', // Use POST with X-HTTP-Method-Override or a straight PUT if appropriate.
    dataType: 'json', // Set datatype - affects Accept header
    url: "http://example.com/people/1", // A valid URL
    headers: "X-HTTP-Method-Override": "PUT", // X-HTTP-Method-Override set to PUT.
    data: '"name": "Dave"' // Some data e.g. Valid JSON as a string
);

【讨论】：

为什么使用 'POST' 作为类型但在标题中覆盖它？

查一下，你会发现 put 作为一个类型不能正常工作

如何在你的控制器中获取？

这仅适用于那些理解该标头的服务器，作为缺乏对“PUT”或“DELETE”方法支持的解决方法。太可怕了。

对不起，我应该说这很糟糕，因为它引入了安全问题。如果您可以合法且正确地执行 PUT 请求，请执行此操作。

【参考方案3】：

$.ajax(
        url: window.serverUrl + 'student/event/' + eventId,
        type: 'put',
        data: JSON.stringify(data),
        headers: 
            'x-auth-token': localStorage.accessToken,
            "Content-Type": "application/json"
        ,
        dataType: 'json'
)

这对我有用