Ajax - un seul appel de fonctions pour faire des liens et soumettre des formulaires

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 369 fois - Téléchargée 21 fois

Contenu du snippet

Bonjour,

Voilà je suis débutant, et j'ai réalisé pour mon besoin deux fonctions Javascript qui me permettent par le biais d'Ajax de pouvoir aussi bien soumettre un formulaire que de réaliser des liens hypertextes. Le tout à partir d'un seul appel de fonction standard. Les paramètres (il n'y en a que 4) permettent de faire le reste.

N'hésitez pas à critiquer, même si jusque là, ces fonctions ont très bien marché et je les mets à l'épreuve en développant mon propre CMS :p

Source / Exemple :


function getFormData(form)
	{
		var data1 = "";
		var form = document.getElementById(form);
		var elements = form.elements;
		for(var i=0; i<form.length; i++)
			{
				data1 += elements[i].name + "=" +escape(elements[i].value);
				if((i+1)<form.length)
					{
						data1+="&";
					}
			}
		return data1;
	}

function ajax(fichier, div, method, form)
	{
		var xhr=null;
		var data="null";

		if(form!="null")
		{
			if(method=="GET")
			{
			data=form;
			method="POST";
			}
			else
			{
			data = getFormData(form);
			}
		}
// détection du navigateur pour la création de l'objet XMLHttpRequest (soit l'acronyme xhr)
		if (window.XMLHttpRequest)
		{
			xhr = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xhr.open( method, fichier, false);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(data);

		if (document.getElementById)
                {
                        document.getElementById(div).innerHTML=xhr.responseText;
                }
                else
                {
                        if (document.layers)
                        {
                                document.div.innerHTML=xhr.responseText;
                        }
                        else
                        {
                                document.all.div.innerHTML=xhr.responseText;
                        }
                }

	}

// Appels
ajax("monfichier.php", "div_de_destination", "GET", null)
ajax("monfichier.php", "div_de_destination", "POST", null)
// ces appels permettent d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destination, ici il n'y a pas de paramètre. Ce sont les appels de base, ils me servent notamment pour faire les liens hypertextes.
ajax("monfichier.php", "div_de_destination", "GET", "c=2&d=4")
// cet appel permet d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destinatio, les données c=2 et d=4 sont transmises par la méthode POST.
ajax("monfichier.php", "div_de_destination", "POST", "mon_formulaire")
// cet appel permet d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destinatio, les données du formulaire sont récupérées et mises en forme (également encodées avec la fonction escape, équivalent de l'url_encode de php) par la fonction getFormData puis sont transmises par la méthode POST.

Conclusion :


Pour appeller la fonction de départ, il vous suffit de suivre les exemples en bas de la source.

Je suppose que ce n'est pas ce qui se fait de mieux, mais ça marche très bien jusqu'à maintenant.

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mardi 16 janvier 2007
Statut
Membre
Dernière intervention
27 janvier 2009

Slt à vous !
Je voulais savoir si vs avez trouver une version de ce code compatible sur FF ?
ça serai terrible d'avoir de l'ajax avec form ! superbe methode ! mais pas que sur IE !
Si oui,
Quel est la modif à faire ?

W@lex
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

> GMail y arrivent, parce qu'ils font comme toi XD

C'est ce que je pensais, mais je n'en ai pas vraiment l'impression...
Le "Input" tag est dans une table qui contient tout l'entete du mail, et ils appellent une fonction dans le onchange dont je n'ai pas reussi a trouver la source ( _CM_OnAttach() si je me souviens bien).

Je pense que ca se verrai si tout l'entete etait recharge, non ?

Eric
Messages postés
47
Date d'inscription
vendredi 7 octobre 2005
Statut
Membre
Dernière intervention
2 janvier 2008

GMail y arrivent, parce qu'ils font comme toi XD
Messages postés
239
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
20 avril 2009

Salut,

> "je suis sûr qu'il y a moyen de soumettre le formulaire d'envoi de fichiers avec cet appel de fonction"
> => pas de façon portable... faut activeX pour pouvoir lire des fichiers chez le client...

Dans GMail, ils y arrivent, non ?
Bon, je n'ai pas reussi a trouver comment :o) mais ca doit etre possible.
Pour l'instant quand j'ai besoin d'uploader un fichier dans une appli ajax, je fais un peu le porc en mettant un form normal dans une petite IFrame.
Si quelqu'un connait une meilleure methode, je suis preneur :o)

Eric
Messages postés
33
Date d'inscription
dimanche 9 octobre 2005
Statut
Membre
Dernière intervention
10 avril 2020

Y'a plus le lien pour télécharger !
Afficher les 21 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.