im trying to learn ajax with jquery but there is something i dont understand. As you can see in the code below, when we call the onSuccess function it takes no arguments, but the function itself does take the response. The code is working, but how and why? and if i want to send another parameter to the success function how do i do it?
$.ajax({
type: "POST",
//getListOfCars is my webmethod
url: "WebService.asmx/getListOfCars",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json", // dataType is json format
success: OnSuccess,
error: OnErrorCall
});
****function OnSuccess(response) {
console.log(response.d)
}****
one way to use other parameter is to define them first and be in the same scope
function ajaxCaller(){
var useable= 'my inject';
$.ajax(
...
sucess: successListener
)
var successListener = function(data){
console.log(data);
console.log(useable); // can access here because the scope is given
}
}
the ajax callback is fix defined successListener(data, statusText, jqXHR) and you cant inject some parameter inside this structure for my knowledge.
one thing is possible. append the parameters you need to your dataObject and ignore it by your api. than you can access the jqXHR object what holds the requested parameters.
success: function(data, text, jqXHR)
It seems you might be confusing the act of calling a function and passing the reference to a function. Consider the following code:
function plusOne(inputParam) {
return inputParam + 1;
}
var value = plusOne(6) // value = 7
function funcCaller(callback){
var cbValue = poCallback(99);
return cbValue;
}
var value2 = funcCaller(plusOne); // value2 = 100
Here you have a function called plusOne, which just adds 1 to the parameter you gave it and returns it. The variable value is set to the value of 7 because you called the plusOne function with a parameter of 6 passed in. This is what you expect when you call a function.
After that, you declare a new function which takes in its parameter another function (often referred to as a callback function). All funcCaller does is call whatever parameter you passed it with a default value of 99 and returns the response. Now in the last line the variable value2 is set to 100. This is because It calls the function funcCaller and passes to it a reference to plusOne, note its not calling plusOne but just passing its reference as a parameter to funcCaller. Now funcCaller calls plusOne with 99 and gets 100 as a response, which it then returns back to value2.
So here you'll notice that in your last line you just passed plusOne without any parameters, but it still got called with a parameter of 99 eventually. So in the jquery ajax there is essentially something like this going on, after it finishes getting a response from your POST, it calles the function you passed in with its own set of parameters, notably: Function(data, textStatus, jqXHR)
In my experience with javascript functions/ callbacks if you dont specify the parameters then javascript just takes care of it for you. if you changed your code to this tho:
$.ajax({
type: "POST",
//getListOfCars is my webmethod
url: "WebService.asmx/getListOfCars",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json", // dataType is json format
success: OnSuccess(true),
error: OnErrorCall(false)
});
Then it will just pass what you tell it to and it will not fill in the response object. If you want to pass more parameters then you need to add parameters to your success and error callback handlers. You can pass them explicitly or jquery might pass objects to them. Also, remember that jquery is calling these handlers behind the scenes, you are just specifying the name of the function that jquery calls.