прикрепить изображение загрузчика ajax

Question

Это может быть просто, но довольно сложно для такого неопытного парня, как я. Начал копать исходный код, и я придумал сценарий ajax. Я запутался, где или как я могу добавить образ загрузчика ajax здесь:

$.post(webroot+'quickLookUp.php',{'format':'json','function':'Lookup','domain':$('.domain_name').val(),'tld':'.'+$('.domain_name_ext').val()},
function(data)
{
  data = $.parseJSON(data);
  if(data[0].result != 'Available')
  // script here
  else
  // script here
});

Answer 1

/*SHOW Loading Icon Here*/

$.post(webroot+'quickLookUp.php',{'format':'json','function':'Lookup','domain':$('.domain_name').val(),'tld':'.'+$('.domain_name_ext').val()},
function(data)
{

  /*HIDE Loading Icon Here*/

  data = $.parseJSON(data);
  if(data[0].result != 'Available')
  // script here
  else
  // script here
});

Вы просто показываете изображение перед вызовом и скрываете его в функции обратного вызова для запроса AJAX.

Вы также можете использовать Глобальные события AJAX в jQuery, чтобы всегда отображать загрузочное изображение при отправке запроса AJAX (и скрывать его, когда запрос выполнен):

$.ajaxStart(function () {
    /*SHOW Loading Icon*/
}).ajaxComplete(function () {
    /*HIDE Loading Icon*/
}).post(...);

Вот документация для обработчиков событий JQuery Global AJAX: http://api.jquery.com/ajaxComplete/

Answer 2

showSpinner();
$.post(webroot+'quickLookUp.php', {'format':'json','function':'Lookup','domain':$('.domain_name').val(),'tld':'.'+$('.domain_name_ext').val()},
function(data)
{
    hideSpinner();
    ...
});

Где функции showSpinner и hideSpinner будут отображать и скрывать изображение прогресса AJAX соответственно.

И если вы хотите сделать это для всех запросов AJAX на текущей странице, вы можете использовать$.ajaxSetup:

$.ajaxSetup({
    beforeSend: showSpinner,
    complete: hideSpinner
});