Envoyer un formulaire via AJAX avec avancement du chargement?

Question

juste besoin de conseils sur la façon de faire des formulaires où les demandes sont soumises via AJAX avec une image de progression de chargement. J'utilise des panneaux de mise à jour avec le framework AJAX. J'aimerais connaître l'approche recommandée. Avec JQuery ou AJAX toolkit?

S'il vous plaît, des conseils, des exemples seraient un bonus supplémentaire pour moi.

Answer 1

Je voudrais savoir sur l'approche recommandée

Eh bien, cela dépend de ce que vous faites, quelles parties du formulaire sont mise à jour vous, quelle est la forme, quelles valeurs vous sont envoyés au serveur. En règle générale, si vous voulez mettre à jour quelque chose de simple (liste déroulante, listbox, etc.), vous utiliserez généralement JavaScript (ou jQuery) pour appeler un service Web compatible AJAX. De cette façon, vous envoyez seulement au serveur les données dont il a besoin, des choses comme ViewState/cookies ne sont pas envoyées sur le réseau. Vous avez également un contrôle total sur les événements d'exécution pré/post (vous pouvez donc ajouter vos images de chargement, appeler le WS, puis les effacer). Cependant, si vous voulez mettre à jour de manière asynchrone un formulaire entier (qui a beaucoup de contrôles), vous avez probablement raison d'utiliser un UpdatePanel. Des choses comme un GridView sont un bon cas pour un UpdatePanel (comme vous avez habituellement besoin de gérer l'édition, la liaison et la pagination tout de manière asynchrone).

L'image de progression est facilitée avec le code suivant:

<ProgressTemplate> 
    <img src="someloadingimage.gif" alt="Loading" /> 
</ProgressTemplate> 

bâton dans votre UpdatePanel, et chaque fois qu'un appel AJAX est fait, l'image de chargement seront affichées.

HTH

Answer 2

1- Préparez une div côté client avec la propriété de style "display: none". mettez votre image de chargement à l'intérieur. 2 - lorsque l'utilisateur ou la page soumet une requête, changez la propriété d'affichage divs en "bloquer".

3- Ajouter une sorte de « informations reçues » signer la réponse et vérifier cette réponse du côté client, puis changer cette propriété d'affichage divs Retour à « none »

Answer 3

Si vous utilisez JQuery pour requête AJAX, vous pouvez utiliser les événements suivants -

$.ajax({ url: "test.html", 
type: "GET", 
beforeSend: function(){ 
      -----load your loader here----- 
      });, 
success: function(){ 
     ------remove your loader here ----------- 
     Remaining code 
     }}); 

Vous pouvez également utiliser POST. dans l'exemple ci-dessus j'ai utilisé GET.

Pour une documentation détaillée, vous pouvez consulter - http://api.jquery.com/jQuery.ajax/

Answer 4

Créer un petit plug-in pour votre chargeur comme ceci.

$.fn.ShowLoader = function(on){ 
    switch(on) 
    { 
     case true: 
      $(this).show(); 
     break; 
     default: 
      $(this).hide(); 
     break; 
    } 
} 

puis utilisez les suivantes:

$('form').submit(function(){ 
    var Form = $(this); 

    $('.loader',Form).ShowLoader(true); 

    //Gather some params 
    Location = Form.attr('src'); 
    Data = Form.Serialize(); 

    $.post(Location,Data,function(result){ 
     result = result || false; 
     if(result) 
     { 
      $('.loader',Form).ShowLoader(false); //Disable the loader 
      //Process result 
     } 
    }); 
}) 

html serait juste une forme régulière, avec une image/div intérieur avec la classe de loader