CODEWITHSUNDEEP
javascriptjqueryajax
Xriter
Xriter

Reputation: 200

jQuery ajax request: how to access sent data in success function?

So I'm trying to achieve the following, but I can't figure out how to make this work.

$.ajax({
  url: "whatever.php",
  method: "POST",
  data: { myVar: "hello" },
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+data.myVar); // <<<< data.myVar is not accessible from here
    console.log('the value of myVar was: '+myVar); // <<<< myVar is not accessible from here
  }
});

Is there a way to access the value of myVar in the .success() function? Can I somehow get to the original data object that was sent in this ajax request, in the .success() function?

Hoping for your solutions. Thanks!

Upvotes: 16

Views: 23905

Answers (5)

Sean Kendle
Sean Kendle

Reputation: 3609

All of the other answers, except for Piyin's, are unreliable and a bad practice.

AJAX requests are, by their very nature, asynchronous. That means that by the time the response gets back from the server, the variable that they set may have been changed. If you want an example, just make two buttons that both fire the same code, but set myData to a different value, and click them each quickly before the response gets back... now the variable has been changed and you'll get unreliable results.

Piyin's answer is good as well, but sometimes you get different formats of the sent data. It might be a JSON object that's been stringify'd, it might be in GET format with query strings, etc.

The easiest way on the coder (although it does create a bit more overhead in RAM) is to assign a new property of the AJAX object and access it in the callback, like this (using Piyin's example):

var dataToSend = { myVar: "hello" };
$.ajax({
  url: "whatever.php",
  method: "POST",
  data: dataToSend,
  sentData: dataToSend, //add this property
  success: function(response) {
    console.log('received this response: ' + response);
    console.log('the value of myVar was: '+ this.sentData.myVar); //access sentData property
  }
});

Upvotes: 7

Piyin
Piyin

Reputation: 1834

You can use this to access the whole object. So you can do something like this:

$.ajax({
  url: "whatever.php",
  method: "POST",
  data: { myVar: "hello" },
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+this.data.myVar);
  }
});

Upvotes: 7

Lindsay Ryan
Lindsay Ryan

Reputation: 443

Generally, if you want to be able to reference data more than once, you need to make sure it's in the proper scope. The scope of the json data object you're passing inside .ajax() is the ajax function. If you want to be able to reference the value of data: outside of that, for example the scope in which you're calling .ajax(), the simplest way is just to assign it to a variable. eg

myData = { myVar: "hello" };
$.ajax({
  url: "whatever.php",
  method: "POST",
  data: myData,
  success: function(response) {
    console.log('received this response: '+response);
    $("#response").html(response);
    console.log('the value of myVar was: '+myData.myVar); // <<<< data.myVar is not accessible from here
    $("#myVar").html(myData.myVar);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="response"></p>
<p id="myVar"></p>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

Create a data object so that you can then access in various parts of the request

var postData ={ myVar: "hello" };

$.ajax({
  url: "whatever.php",
  method: "POST",
  data: postData ,
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+postData.myVar);

Upvotes: 0

powerc9000
powerc9000

Reputation: 2103

Just store the data you are posting in a variable first. 

var data = {myVar: "hello"}
 $.ajax({
  url: "whatever.php",
  method: "POST",
  data: data,
  success: function(response) {
    console.log('received this response: '+response);
    console.log('the value of myVar was: '+data.myVar); 
  }
});

Upvotes: 0

Related Questions