{"id":26,"date":"2023-08-25T17:22:16","date_gmt":"2023-08-25T17:22:16","guid":{"rendered":"\/\/api.jquery.com\/?p=26"},"modified":"2024-04-20T18:06:31","modified_gmt":"2024-04-20T18:06:31","slug":"ajaxSend","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/ajaxSend\/","title":{"rendered":"ajaxSend event"},"content":{"rendered":"<article id=\"on1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.on( \"ajaxSend\", handler )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Attach a function to be executed before an Ajax request is sent. This is an <a href=\"\/Ajax_Events\/\">Ajax Event<\/a>.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.7\/\">1.7<\/a><\/span><a id=\"on-&quot;ajaxSend&quot;-handler\" href=\"#on-%22ajaxSend%22-handler\"><span class=\"icon-link\"><\/span>.on( \"ajaxSend\", handler )<\/a>\n<\/h4>\n<ul>\n<li id=\"on-&quot;ajaxSend&quot;-handler-&quot;ajaxSend&quot;\">\n<div><strong>\"ajaxSend\"<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#string\">string<\/a>\n<\/div>\n<div>The string <code>\"ajaxSend\"<\/code>.<\/div>\n<\/li>\n<li id=\"on-&quot;ajaxSend&quot;-handler-handler\">\n<div><strong>handler<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>( <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a> event, <a href=\"http:\/\/api.jquery.com\/Types\/#jqXHR\">jqXHR<\/a> jqXHR, <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a> ajaxOptions )<\/div>\n<div>The function to be invoked.<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <div class=\"warning\">\n      <p>This page describes the <code>ajaxSend<\/code> event. For the deprecated <code>.ajaxSend()<\/code> method, see <a href=\"\/ajaxSend-shorthand\/\"><code>.ajaxSend()<\/code><\/a>.<\/p>\n    <\/div>\n    <p>Whenever an Ajax request is about to be sent, jQuery triggers the <code>ajaxSend<\/code> event. Any and all registerd <code>ajaxSend<\/code> handlers are executed at this time.<\/p>\n    <p>To observe this method in action, set up a basic Ajax load request:<\/p>\n    <div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"trigger\"<\/span>&gt;<\/span>Trigger<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"result\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"log\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>Attach the event handler to the document:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">\"ajaxSend\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">\".log\"<\/span> ).text( <span class=\"hljs-string\">\"Triggered ajaxSend handler.\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>Now, make an Ajax request using any jQuery method:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\".trigger\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">\".result\"<\/span> ).load( <span class=\"hljs-string\">\"ajax\/test.html\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>When the user clicks the element with class <code>trigger<\/code> and the Ajax request is about to begin, the log message is displayed.<\/p>\n    <p>All <code>ajaxSend<\/code> handlers are invoked, regardless of what Ajax request is to be sent. If you must differentiate between the requests, use the parameters passed to the handler. Each time an <code>ajaxSend<\/code> handler is executed, it is passed the event object, the <code>jqXHR<\/code> object (in version 1.4, <code>XMLHttpRequest<\/code>object), and the <a href=\"\/jQuery.ajax\/\">settings object<\/a> that was used in the creation of the Ajax request. For example, you can restrict the callback to only handling events dealing with a particular URL:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">\"ajaxSend\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, jqxhr, settings <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">if<\/span> ( settings.url == <span class=\"hljs-string\">\"ajax\/test.html\"<\/span> ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\".log\"<\/span> ).text( <span class=\"hljs-string\">\"Triggered ajaxSend handler.\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n  <\/div>\n<h3>Additional Notes:<\/h3>\n<div class=\"longdesc\"><ul>\n<li>\n\t\t\tAs of jQuery 1.9, all the handlers for the <a href=\"\/category\/ajax\/global-ajax-event-handlers\/\">jQuery global Ajax events<\/a>, including those added with <code>.on( \"ajaxSend\", ... )<\/code>, <em>must<\/em> be attached to <code>document<\/code>.\n\t\t<\/li>\n<li>\n\t\t\tIf <code><a href=\"\/jQuery.ajax\/\">$.ajax()<\/a><\/code> or <code><a href=\"\/jQuery.ajaxSetup\/\">$.ajaxSetup()<\/a><\/code> is called with the <code>global<\/code> option set to <code>false<\/code>, the <code>ajaxSend<\/code> event will not fire.\n\t\t<\/li>\n<\/ul><\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>Show a message before an Ajax request is sent.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">\"ajaxSend\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, request, settings <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">\"#msg\"<\/span> ).append( <span class=\"hljs-string\">\"&lt;li&gt;Starting request at \"<\/span> + settings.url + <span class=\"hljs-string\">\"&lt;\/li&gt;\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,78,96],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-global-ajax-event-handlers","category-78","category-96"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":2,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":720,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/26\/revisions\/720"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}