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 *