Access "data" object in AJAX request inside success function

Question

How can I access the data object used in a $.ajax() request?

$.ajax({
    url: "post.php",
    type:'POST',
    data:{
        el1: $('#el1').val(),
        ...
        el72: $('#el72').val()
    },
    success: function(res,status){
        //
    }
});

Is there a reason you aren't just saving the data in a variable before your AJAX call then referencing that variable in the success callback? — Mike Cluck, Jun 14 '16 at 17:11
^ that will give you the data on the server-side if your server is written in PHP. Are you trying to get the data on the server or access it in your success callback? — Mike Cluck, Jun 14 '16 at 17:14
@MikeC Yes, creating a variable could be a solution. But I decided to ask just to learn more. — yuriy636, Jun 14 '16 at 17:17
@KevinB That works! Can you please write it as answer so I can accept it? — yuriy636, Jun 14 '16 at 17:21
@KevinB It works, you just need to make sure the type is POST: https://jsfiddle.net/17t4kfw9/ the `data` field refers to the HTTP body, I guess. If there's a GET with no body, there's no `data` attribute. Also, if you pass in an object like the OP does, you get formdata-formatted `data`, since that's what is in the HTTP body. — apsillers, Jun 14 '16 at 17:24
makes sense, because as GET it gets added to the url, and you can pull it from `this.url` — Kevin B, Jun 14 '16 at 17:25

score 5 · Accepted Answer · edited May 23 '17 at 12:08

You can access the processed options that you passed into $.ajax from within the success callback using this, as long as you didn't bind the function, use an arrow function, or use the context option.

console.log(this.data); // for POST
console.log(this.url); // for GET, but you'll have to parse out the url portion

You'll notice though that it's in a parameterized string rather than an object now because that's how it is sent to the server. See here for ways to convert it back to an object: Convert URL parameters to a JavaScript object

I would just use a variable.

score 1 · Answer 2 · answered Jun 14 '16 at 17:16

1

Create a variable before calling ajax().

var formData = {
    el1: $('#el1').val(),
    ...
    el72: $('#el72').val()
};

$.ajax({
    url: "post.php",
    type:'POST',
    data: formData,
    success: function(res,status){
        // do something with formData
    }
});

answered Jun 14 '16 at 17:16

Gus Costa

609
5
13

Thank you, but I was looking for an answer without using a variable before the ajax. Upvote though. – yuriy636 Jun 14 '16 at 17:25

Access "data" object in AJAX request inside success function

2 Answers2

Linked