JQUERY AJAX Chargement à l'aide d'AjaxStart / AjaxSetUp

jQuery Ajax Chargement avec ajaxStart() et ajaxStop()

Ce guide démontre l'utilisation des méthodes de jQuery ajaxStart() et ajaxStop() pour gérer les indicateurs de chargement lors des demandes AJAX. Nous couvrirons plusieurs approches, notamment en utilisant ces méthodes directement, en les incorporant dans les appels AJAX et en tirant parti de ajaxSetup().

Méthode 1: utilisation directe de ajaxStart() et ajaxStop()

Cette méthode affiche une image de chargement et désactive le bouton de soumission d'un formulaire pendant qu'une demande Ajax est en cours. Une fois la demande terminée, l'image est cachée et le bouton est réactivé.

var $form = $('#form');

$form.find('.loading')
  .hide()
  .ajaxStart(function() {
      $(this).show();
      $form.find('.submit').attr('disabled', 'disabled');
  })
  .ajaxStop(function() {
      $(this).hide();
      $form.find('.submit').removeAttr('disabled');
  });

Méthode 2: Indicateur de chargement avant et complete gestionnaire

Alternativement, vous pouvez afficher l'indicateur de chargement avant l'appel AJAX et utiliser le gestionnaire complete pour le masquer.

// Show loading image, disable submit button
$form.find('.msg').remove();
$form.find('.loading').show();
$form.find('.submit').attr('disabled', 'disabled');

// AJAX call
$.ajax({
    // ... your AJAX settings ...
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

Méthode 3: Utilisation ajaxSetup() pour la manipulation globale

Pour une solution globale affectant toutes les demandes AJAX, utilisez ajaxSetup(). Cela cache l'image de chargement et permet le formulaire après toutes les demandes ajax complètes.

$.ajaxSetup({
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});

Questions fréquemment posées

La section Q&R suivante aborde les questions courantes sur l'utilisation de ajaxStart(), ajaxStop() et des méthodes JQuery Ajax associées. Notez que la section FAQ d'origine a été condensée et reformulée pour plus de clarté et de concision.

• ajaxStart() Objectif: ajaxStart() Exécute une fonction lorsque une demande Ajax commence et qu'aucune autre demande n'est active. Il est idéal pour afficher des indicateurs de chargement.

• Montrant un spinner de chargement: Créez un élément de spinner (par exemple, <div id="spinner">). Utilisez <code>$(document).ajaxStart(function(){ $("#spinner").show(); }); pour l'afficher.

• Cacher le spinner: Utilisez $(document).ajaxStop(function(){ $("#spinner").hide(); }); pour masquer le spinner lorsque toutes les demandes Ajax terminent.

• ajaxStart() avec des demandes spécifiques: lier ajaxStart() à l'élément initiant la demande Ajax (par exemple, $("#myButton").ajaxStart(...)).

• ajaxStart() vs ajaxSend(): ajaxStart() ne se déclenche que lorsqu'aucune autre demande AJAX n'est en cours d'exécution; ajaxSend() déclenche pour chaque demande.

• Gestion des erreurs: Utiliser ajaxError() à côté ajaxStart() pour gérer les erreurs. Par exemple: $(document).ajaxStart(...).ajaxError(function(event, jqxhr, settings, thrownError){ ... });

• combinant avec d'autres méthodes AJAX: ajaxStart() Fonctionne avec d'autres méthodes JQuery Ajax (ajaxStop(), ajaxComplete(), ajaxError(), etc.).

• Utilisation avec des méthodes de sténographie: ajaxStart() Fonctions avec des méthodes scolaristes comme $.get() et $.post().

Cette réponse révisée fournit une explication plus concise et organisée des techniques de chargement JQuery Ajax, abordant les aspects clés et les questions communes. L'image reste dans sa position d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!