jQuery Ajax Event Handlers
jQuery Global Ajax Event Handlers
Ajax short for asynchronous javascript and XML,is a set of web development techniques which update a web page without reloading the page. It's very important for web2.0.
jQuery makes the use of Ajax more convenient. It provides dozen methods to do the job.
| method | description |
|---|---|
| .ajaxComplete() | Register a handler to be called when Ajax requests complete. |
| .ajaxError() | Register a handler to be called when Ajax requests complete with an error. |
| .ajaxSend() | Attach a function to be executed before an Ajax request is sent. |
| .ajaxStart() | Register a handler to be called when the first Ajax request begins. |
| .ajaxStop() | Register a handler to be called when all Ajax requests have completed. |
| .ajaxSuccess() | Attach a function to be executed whenever an Ajax request completes successfully. |
They all belong to the global event triggered by the request.ajaxSuccess() corresponds to a local method: Success()ajaxComplete() corresponds to a local method:Complete ()ajaxError() corresponds to a local method:error()
Examples:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <script src="main.js"></script> </head> <body> <form> Username<input type="text" name="username" id="user" /> Email<input type="text" name="email" id="email"/> Password<input type="password" name="password" id="password"/> <input type="button" value="submit" /> </form> <span class="loading">loading</span> <div id="box"></div> </body> </html>
$(function(){
$('form input[type=button]').click(function(){
$.ajax({
type:'POST',
url:'register.php',
data:$('form').serialize(),
success:function(response,status,xhr){
$('#box').html(response);
},
error:function(){},
complete:function(){}
});
});
$(document).ajaxSend(function () {
alert('execute before an Ajax request is sent.');
}).ajaxComplete(function () {
alert('Ajax requests complete.');
}).ajaxSuccess(function () {
alert('an Ajax request completes successfully');
}).ajaxError(function () {
alert('Ajax requests complete with an error');
});
});
date2019-04-03 00:25:21 From：www.jquerypluginhub.com Author：JPH
Comments
Leave a Reply
Your email address will not be published. Required fields are marked *