Skip to content

Instantly share code, notes, and snippets.

@melanyss
Forked from JonnyNineToes/Jquery Ajax
Created November 21, 2020 16:21
Show Gist options
  • Save melanyss/312461e1dc9e45a91f875cbb7fd2ea87 to your computer and use it in GitHub Desktop.
Save melanyss/312461e1dc9e45a91f875cbb7fd2ea87 to your computer and use it in GitHub Desktop.
Quick template for Jquery Ajax calls
// submit is an action performed ON THE FORM ITSELF...
// probably best to give the form an ID attribute and refer to it by that
$('form').submit( function (event) {
// prevent the usual form submission behaviour; the "action" attribute of the form
event.preventDefault();
// validation goes below...
// now for the big event
$.ajax({
// the server script you want to send your data to
'url': 'destination.php',
// all of your POST/GET variables
'data': {
// 'dataname': $('input').val(), ...
},
// you may change this to GET, if you like...
'type': 'post',
// the kind of response that you want from the server
'dataType': 'html',
'beforeSend': function () {
// anything you want to have happen before sending the data to the server...
// useful for "loading" animations
}
})
.done( function (response) {
// what you want to happen when an ajax call to the server is successfully completed
// 'response' is what you get back from the script/server
// usually you want to format your response and spit it out to the page
})
.fail( function (code, status) {
// what you want to happen if the ajax request fails (404 error, timeout, etc.)
// 'code' is the numeric code, and 'status' is the text explanation for the error
// I usually just output some fancy error messages
})
.always( function (xhr, status) {
// what you want to have happen no matter if the response is success or error
// here, you would "stop" your loading animations, and maybe output a footer at the end of your content, reading "done"
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment