JS - Envoyez une requête sans actualisation - 1/2

Image
Bonjour,
aujourd'hui, nous allons voir comment envoyer une requête PHP en passant par du JS (Ajax) afin de ne pas avoir d'actualisation lorsque l'on appuie sur le submit de notre formulaire.
Le tutoriel sera divisé en 2 parties.
On va donc utiliser XMLHttpRequest.
Tout d'abord je tiens à préciser que c'est grâce à OpenClassRooms que je vous fais ce tutoriel. Afin de vous pencher en détail sur Ajax, voici leur cours.
Moi je vais simplement vous montrer ce qui est nécessaire à ce que l'on cherche.
Tout d'abord on crée notre formulaire en méthode POST ou GET, mais il y aura des différences, je choisis GET qui est le plus simple, je vous conseille de faire de même:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.


Adaptez le à vos besoins. Cependant vous devez impérativement ajouter onSubmit="votreFonction() return false;". En gros on dis au formulaire que, lorsqu'on submit le tout, on appelle la fonction post() (ou votreFonction() ) et on ne fait rien d'autre.
Ensuite, on reste dans le même fichier et on rajoute ceci dans des balises script:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.


Je vous renvoie au lien OPCS donné plus haut pour les explications sur cette fonction.
Une fois cela collé, ajoutez maintenant ceci:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.


('ctnt') doit-être l'id de votre textarea (ou autre entrée texte)

Pour finir, le plus "dur", prenez cette fonction:

Vous devez avoir un compte sur skilldevice.com pour pouvoir visualiser ce code.


Encore une fois je vous renvoie au tuto de OPCS pour des explications détaillées.
Ce qui nous intéressent c'est la variable content et la fin de la fonction à partir de xhr.open();
Vous l'aurez compris, GET s'agit de la méthode du formulaire. Ensuite "traitement.php?content="+content, s'agit de l'appel du fichier contenant le traitement PHP, pour envoyer les infos dans votre BDD.
setEmptyTextArea() permet de vider l'entrée après l'envoi.
La variable content permet de récupérer le contenu de notre textarea.
Si vous avez plusieurs entrée ils vous suffit de faire autant de variable que d'entrée, en spécifiant le bon ID bien sûr. Ensuite adaptez ceci: "traitement.php?var1="+var1+"&var2="+var2+"&var3="+var3,

Je vous propose de nous arrêter là pour le moment. Dans la seconde et dernière partie, on s'occupera de la partie traitement en PHP.
Partie 2/2
Avatar

N'accuse pas le puit d'être trop profond, c'est ta corde qui est trop courte.

0 Commentaire

Vous devez être connecté pour écrire un commentaire. Se connecter
Top