Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>By default, <code>$.ajax</code> (and anything that uses it, such as <code>$.post</code>) makes asynchronous requests. You can make the request synchronous by specifying <code>async:false</code> (see <a href="http://api.jquery.com/jQuery.ajax/" rel="nofollow">documentation</a>). I don't recommend you use synchronous AJAX requests, though, as it degrades performance and leads to poor user experience. Instead, consider using a callback which is invoked in your success handler when the result is complete.</p> <p>Here are two arbitrary and simple examples, where we have an anchor that we want to have the text replaced from the result of an AJAX call when clicked. Both do the same thing, but the second one is preferred because it keeps the browser responsive.</p> <p>Synchronous:</p> <pre><code>function invokeAjaxSync() { var text; $.ajax({url: '/path/to/resource', async:false, success: function(result) { text = result.toString(); }}); // will wait until this call is complete return text; } $('a.example').click(function() { $(this).text(invokeAjaxSync()); // works, but the browser will be unresponsive while waiting for a response. }); </code></pre> <p>Asynchronous (better):</p> <pre><code>function invokeAjaxAsync(callback) { $.ajax({url:'/path/to/resource', success: function(result) { callback(result); }}); } $('a.example').click(function() { var $this = $(this); invokeAjaxAsync(function(result) { $this.text(result.toString()); }); // browser will remain responsive, but still update text when the AJAX call completes. }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload