Interaction entre AJAX et PHP

**Acarya** · 18/06/2017, 21h22

Bonjour à tous,

J'ai téléchargé une template "Site en construction" comportant un formulaire de contact (en php) et faisant appel à de l'ajax pour valider l'envoi du mail par l'utilisateur.
Je précise que je suis totalement néophyte en matière de programmation web ; après avoir réussi à résoudre le problème de l'envoi des e-mails qui ne s'effectuait pas, j'essaie de comprendre ce qui freine l'interaction entre la partie php et l'ajax pour (si j'ai bien tout compris) une prise en charge par la partie client.

Je pense qu'il manque dans le code une communication entre les deux outils ou bien celle-ci ne se fait pas correctement pour une raison qui dépasse mes modestes compétences. Si une âme charitable est susceptible de m'accompagner à passer de l'ignorance à la connaissance, elle recevra toute ma gratitude

Voici donc un lien vers la page en question :
http://energyconsulting-france.com

Bien cordialement,
Thomas

**NoSmoking** · 19/06/2017, 13h17

Bonjour,
commence peut-être par comprendre les mécanismes d'AJAX !

**Acarya** · 19/06/2017, 16h29

Merci, No Smoking !
Je ne voudrais pas abuser de l'hospitalité qui m'est offerte ici mais suppose la chose suivante :
- on te demande d'effectuer une séance d'hypnose (sans avoir appris l'hypnose) à quelqu'un pour l'aider thérapeutiquement
- tu recherches des tutoriaux sur internet mais tu rends vite compte que l'hypnose est un art complexe, et qui plus est, tu n'éprouves pas une attirance
particulière pour la discipline ni pour l'apprendre et encore moins en faire ton métier
- pourtant, comme ta tâche est de faire cette séance quand même, tu trouves donc une séance d'hypnose toute faite,
et les maigres connaissances que tu as pu récolter te permettent d'entrevoir que la séance demande quelques ajustements, même si tu ne sais pas lesquels préciséments pour qu'elle soit pleinement opérative.
- tu demandes de l'aide sur un forum d'hypnose en expliquant bien que ce n'est pas ton travail, que tu es totalement néophyte et on te met un lien vers des cours (au demeurant très bien faits).

C'est utile, mais penses-tu vraiment que cela t'aidera à résoudre ton problème ?

**NoSmoking** · 19/06/2017, 18h50

Mon point de vue est légèrement différent du tien, dans le cas que tu cites je commencerais par me renseigner sur le comment ça fonctionne, il est important de ne pas faire n'importe quoi, ensuite je regarderais si je me sens l'âme/compétences d'y arriver, sans tenir compte de la charge de travail éventuelle, si oui je me lance et en cas de soucis je ferais appel aux forums pour me dépatouiller d'un point obscur, dans le cas contraire je ferais surement appel à des professionnels.

Donc je pense qu'après avoir lu le lien que je t'ai fourni tu dois déjà avoir une idée de là où tu te trouves. Si tu te lances on pourra toujours t'aider.

**Acarya** · 20/06/2017, 16h12

Bon, voyons déjà si j'y vois à peu près clair au milieu de tous ces langages différents ^^ :

Ceci est exécuté sur le serveur et sert à envoyer le mail (j'ai déjà réussi à le bricoler car ça ne fonctionnait pas au départ) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
// Email Setting
//=======================================
$admin_email = "contact@energyconsulting-france.com";
$from_name   = "contact@energyconsulting-france.com";
 
if(isset($_POST['email'])) {
 
	 $user_name 	= strip_tags($_POST['name']);
	 $user_email 	= strip_tags($_POST['email']);
	 $comment_text 	= strip_tags($_POST['message']);
 
	if (!filter_var($user_email, FILTER_VALIDATE_EMAIL)) {
	echo 5;
	exit;
	}
	else
	{
	$to  	   		= "$admin_email"; 
	$subject 		= "New Contact Information";
	$message		= "Name: $user_name <br/>";
	$message 		.= "Email: $user_email <br/>";
	$message 		.= "Comment: $comment_text <br/>";
	$headers  		= "MIME-Version: 1.0\r\n";
	$headers 		.= "Content-type: text/html; charset=iso-8859-1\r\n";
	$headers 		.= "From:$from_name<$admin_email>";
	$headers 		.= "Reply-To: $admin_email\r\n"."X-Mailer: PHP/".phpversion();
	$send 			= mail($to, $subject, $message, $headers);
	echo "1";
}
}
?>

Le commande echo "1", si je saisis bien, renvoie une donnée qui est ensuite supposée être récupérée par l'Ajax ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
	/* ==============================================
	Ajax Submiting For Email Contact Form.
	=====================================================================*/	
	$("#contact_form").submit(function(e)
	{
	$('#show_contact_msg').html('<div class=gen>Submiting..</div>');
	var username = $('#contact_name').val();
	var useremail = $('#contact_email').val();
	var commenttext = $('#contact_text').val();
		var formURL = $(this).attr("action");
		var data = {
					username:username,
					useremail:useremail,
					commenttext:commenttext,
				   }
		$.ajax(
		{
			url : formURL
			type: "POST",
			data : data,
 
		 success: function (res) {
								 if(res=='1'){
									$('#show_contact_msg').html('<div class=gen>Thank you very much, We will notify you when we lunch</div>');
								 }
 
								 if(res=='5'){
								 $('#show_contact_msg').html('<div class=err>Please enter a valid email address</div>');
								 }
							}
		});
		e.preventDefault();	//STOP default action
	});

Après l'envoi du mail, ça affiche "1" sur un écran blanc, sans que la partie "client" ne "garde la main" (mon langage est peut être maladroit).
Je pense qu'il doit donc manquer une instruction qq part. Qu'en penses-tu ?

**NoSmoking** · 20/06/2017, 18h52

Si j'ai bien compris, ce que j'observe est que tu prépares et envoies des données mais que tu ne les lis pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
  var data = {
    username: username,
    useremail: useremail,
    commenttext: commenttext,
  }
  $.ajax({
    url: formURL
    type: 'POST',
    data: data,

et coté serveur

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(isset($_POST['email'])) {
  $user_name 	= strip_tags($_POST['name']);
  $user_email 	= strip_tags($_POST['email']);
  $comment_text 	= strip_tags($_POST['message']);

regarde ce que tu reçois en mettant un var_dump($_POST) ou autre.

**Acarya** · 21/06/2017, 16h24

Merci de m'aider :
La variable $POST contient un tableau récupérant les trois informations qui sont ensuite transmises par mail :
Ca me semble correct, non ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
array(3) { ["name"]=> string(6) "Thomas" ["email"]=> string(18) "012345678@oooooo.fr" ["message"]=> string(4) "test" } 1

**NoSmoking** · 22/06/2017, 19h49

Compte tenu de la réponse coté serveur que tu obtiens il est clair que ton code javascript déclenche une erreur.
Tu aurais du obtenir

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

array(3) { ["username"]=> string(6) "Thomas" ["useremail"]=> string(18) "012345678@oooooo.fr" ["commenttext"]=> string(4) "test" } 1

Je viens de regarder ton code et là ô stupeur c'est à

, tous sur une ligne ce qui est illisible et peu générer des erreurs, à preuve et dans ton code des erreurs il y en a

• Commençons par un classique du code « oneLine », les commentaires du type //STOP default action font que tout ce qui suit est ignoré, cela commence mal.

• Poursuivons avec l’utilité" de mettre des ; en fin d'instruction même si lors d'un code bien indenté c'est le retour chariot qui est considéré comme la fin de l'instruction
cette instruction devient illégale

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data = { username:username, useremail:useremail, commenttext:commenttext, } $.ajax( {

alors que celle ci le sera

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data = { username:username, useremail:useremail, commenttext:commenttext, }; $.ajax( {

• Les propriétés/valeurs dans un objet doivent être séparé par une virgule ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  $.ajax({
    url: formURL
    type: 'POST',
    data: data,

il te manque une virgule après formURL.

Commence par corriger tout cela et de grâce INDENTE ton code autant HTML que JS, le débogage n'en sera que plus facile !

**Acarya** · 24/06/2017, 16h08

J'ai corrigé je l'espère au mieux les virgules, et points-virgules manquants et marquant les instructions pour la partie Ajax.

Je n'arrive pas à comprendre pourquoi ça bloque sur l'affichage de la partie PHP avec le retour à l'écran de la commande echo "1" signifiant au demeurant
que le code a bien été exécuté.

Ici est la partie du code HTML supposée générer le formulaire de l'envoi du mail : (je croise les doigts pour que ça s'affiche clairement ^^)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<form method="post" id="contact_form" action="contact.php">
     <input type="text" id="contact_name" name="name" class="form-control contact_input_box wow fadeInUp" placeholder="Votre Nom" required/>
     <input type="email" id="contact_email" name="email" class="form-control contact_input_box wow fadeInUp" placeholder="Votre E-Mail" required/>
     <textarea id="contact_text" name="message" rows="5" cols="30" class="form-control contact_input_box wow fadeInUp" placeholder="Message" required/</textarea>
     <button type="submit" class="btn btn-primary contact_button wow fadeInUp"> <i class="fa fa-send-o"></i>  Envoyez votre message</button>
</form>

**NoSmoking** · 24/06/2017, 19h29

Je pense que tu n'a pas été assez curieux pour corriger d'autres éventuelles coquilles car il en reste une que tu pourrais repérer rapidement dans la console (F12) si tu INDENTAIS correctement ton code.

Ton code INDENTE donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$("#contact_form").submit(function(e) {
  $('#show_contact_msg').html('<div class=gen>Submiting..</div>');
  var username = $('#contact_name').val();
  var useremail = $('#contact_email').val();
  var commenttext = $('#contact_text').val();
  var formURL = $(this).attr("action");
  var data = {
    username: username,
    useremail: useremail,
    commenttext: commenttext,
  };
  $.ajax({
    url: formURL,
    type: 'POST',
    data: data,
    success: function(res) {
      if (res == '1') {
        $('#show_contact_msg').html('<div class=gen>Thank you very much, We will notify you when we lunch</div>');
      }
      if (res == '5') {
        $('#show_contact_msg').html('<div class=err>Please enter a valid email address</div>');
      }
    };
  });
  e.preventDefault();
});

il y a un ; en trop ligne 23 et profite pour en enlever la , de fin ligne 10.

**Acarya** · 25/06/2017, 22h45

Merci !
Je ne saisis pas trop ce problème d'indentation, car quand j'affiche le code dans notepad+, il semble indenté, au moins à peu près, correctement ^^
J'ai procédé à tes corrections !

Effectivement cela progresse, l'AJAX démarre et affiche le message "Submiting" écrit dans le code, par contre, le reste de la fonction ne s'exécute pas et je ne reçois plus les e-mails.
Il doit y avoir autre chose ^^Merci encore pour ton aide, car s'y retrouver avec cette programmation en plusieurs langages différents de surcroît ne m'est pas facile ^^

**NoSmoking** · 26/06/2017, 10h06

Je ne saisis pas trop ce problème d'indentation, car quand j'affiche le code dans notepad+,

Regarde dans le menu : Edition → Convertir les sauts de ligne → Convertir en format Windows (CR +LF).

Pour le reste il te faut être cohérent entre les ID de tes éléments et ce que tu souhaites exploiter coté serveur correspondant aux NAME.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<form method="post" id="contact_form" action="contact.php">
  <input id="contact_name" name="name" class="form-control contact_input_box wow fadeInUp animated" placeholder="Votre Nom" required="" style="visibility: visible; animation-name: fadeInUp;" type="text">
  <input id="contact_email" name="email" class="form-control contact_input_box wow fadeInUp animated" placeholder="Votre E-Mail" required="" style="visibility: visible; animation-name: fadeInUp;" type="email">
  <textarea id="contact_text" name="message" rows="5" cols="30" class="form-control contact_input_box wow fadeInUp animated" placeholder="Message" required="" style="visibility: visible; animation-name: fadeInUp;"></textarea>
  <button type="submit" class="btn btn-primary contact_button wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
    <i class="fa fa-send-o"></i>  Envoyez votre message
  </button>
</form>

Interaction entre AJAX et PHP

AJAX

Discussions similaires

Partager

Partager