How to implement a PUT call with JSON data using AJAX and JQuery?

Question

I've looked around and tried many different methods, but can't seem to pass actual data to my controller's function.

Here is some code:

        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 and oldEntry are both objects.

The alert line outputs this (with some properties removed, just for brevity):

{"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}}

When I debug my controller action ("UpdateEntry"), the two parameters are filled with the TimesheetEntry class default parameters (0).

Am I passing this in properly?

Can you expand on what you mean when you say "When I debug my controller action ("UpdateEntry"), the two parameters are filled with the TimesheetEntry class default parameters (0)."? What are you using on the server (i.e. Rails) and how are you converting JSON on the server to TimesheetEntry? — InPursuit
– InPursuit, Commented Oct 24, 2012 at 20:08
The dataType attribute is only used when you're getting data from the server. You should be setting contentType to application/json when sending data to the server. — InPursuit
– InPursuit, Commented Oct 24, 2012 at 20:11
Thank you InPursuit! That fixed it. Would you like to add this as an answer and I can accept it? — D'Arcy Rail-Ip
– D'Arcy Rail-Ip, Commented Oct 24, 2012 at 20:13

InPursuit · Accepted Answer · 2012-10-24 20:15:29Z

40

The dataType attribute is only used when you're getting data from the server. You should be setting contentType to application/json when sending data to the server.

answered Oct 24, 2012 at 20:15

InPursuit

3,29327 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jayadeep KM · Accepted Answer · 2017-03-05 06:07:37Z

7

$.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'
})

This worked for me

answered Mar 5, 2017 at 6:07

Jayadeep KM

1713 silver badges7 bronze badges

Comments

Sean Mickey · Accepted Answer · 2016-03-08 19:32:51Z

4

Use headers: {"X-HTTP-Method-Override": "PUT"} and override the POST request type. It works on my project...

$.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
});

edited Mar 8, 2016 at 19:32

Sean Mickey

7,7362 gold badges34 silver badges59 bronze badges

answered Dec 23, 2015 at 20:42

LifeInstructor

1,6101 gold badge20 silver badges26 bronze badges

5 Comments

Mese Over a year ago

Why use 'POST' as the type but override it in the headers?

LifeInstructor Over a year ago

Look up and you will see that put as a type doesn't work as should be

famas23 Over a year ago

And how to get the in your controller?

Joseph Van Riper Over a year ago

This only works with those servers that understand that header, as a workaround for lacking support for the 'PUT' or 'DELETE' methods. It's awful.

Joseph Van Riper Over a year ago

Sorry, I should say that it's awful, as it introduces security concerns. If you can legitimately and properly do a PUT request, do so.

Collectives™ on Stack Overflow

How to implement a PUT call with JSON data using AJAX and JQuery?

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related