jQuery AJAX custom function and custom callback?
Solution 1
EDIT:
Got a recent upvote for this and I feel compelled to state that I would no longer do it this way. $.ajax
returns a promise
so you can do pretty much what i just did here in a more consistent and robust way using the promise directly.
function customRequest(u,d) {
var promise = $.ajax({
type: 'post',
data: d,
url: u
})
.done(function (responseData, status, xhr) {
// preconfigured logic for success
})
.fail(function (xhr, status, err) {
//predetermined logic for unsuccessful request
});
return promise;
}
Then usage looks like:
// using `done` which will add the callback to the stack
// to be run when the promise is resolved
customRequest('whatever.php', {'somekey': 'somevalue'}).done(function (data) {
var n = 1,
m = 2;
alert(m + n + data);
});
// using fail which will add the callback to the stack
// to be run when the promise is rejected
customRequest('whatever.php', {'somekey': 'somevalue'}).fail(function (xhr, status, err) {
console.log(status, err);
});
// using then which will add callabcks to the
// success AND failure stacks respectively when
// the request is resolved/rejected
customRequest('whatever.php', {'somekey': 'somevalue'}).then(
function (data) {
var n = 1,
m = 2;
alert(m + n + data);
},
function (xhr, status, err) {
console.log(status, err);
});
Sure i do this all the time. You can either execute the callback within the actual success callack or you can assign the callback as the success callback:
function customRequest(u,d,callback) {
$.ajax({
type: "post",
url: u,
data:d,
success: function(data) {
console.log(data); // predefined logic if any
if(typeof callback == 'function') {
callback(data);
}
}
});
}
Usage would look something like:
customRequest('whatever.php', {'somekey': 'somevalue'}, function (data) {
var n = 1,
m = 2;
alert(m + n + data);
});
Solution 2
function customAjax(u, d, theCallbackStuff) {
$.ajax({
type: "post",
url: u,
data: d,
success: theCallbackStuff
});
}
customAjax(url, data, function(data){
//do something
});
Solution 3
On this note, you can pass a complete function as a callback to this:
function customRequest(u,d,callback) {
$.ajax({
type: "post",
url: u,
data:d,
success: function(data) {
console.log(data); // predefined logic if any
if(typeof callback == 'function') {
callback(data);
}
}
});
}
// Then call it as follows:
function initiator() {
customRequest( '/url/to/post', 'param1=val', function() { alert( 'complete' ); })
}
Simply passing it as an anonymous function will work too.. Just for the sake of showing :)
Related videos on Youtube
Barrie Reader
I enjoy pushing languages to do things that they shouldn't (normally) be able to do - like make me tea and rub my feet. #SOreadytohelp
Updated on July 11, 2022Comments
-
Barrie Reader almost 2 years
Heylow everyone!
I have an
ajax()
call like so:$.ajax({ type: "post", url: "whatever.php", data: { theData: "moo moo" }, success: function(data) { console.log(data); } });
Is it possible to wrap this inside a custom function but retain the callback?
Something like:function customAjax(u, d, theCallbackStuff) { $.ajax({ type: "post", url: u, data: d, success: function(data) { //RUN theCallbackStuff } }); }
theCallbackStuff
will be something like:var m = 1; var n = 2; alert(m + n + data);
-
Barry Chapman over 11 yearsI would make sure you check for existence of the function using:
if(window.some_function_name_here)
orif( typeof funcname == 'function' )