Discussion :

[mOscar007]

Bonjour à tous,

J'ai un souci avec mon code lors d'envoi d'un formulaire (traitement Ajax et PHP).
Je ne comprend pas d’où vient le problème car j'ai fait le même test ça a marché au début et subitement un problème survient après.
En effet, j'ai un formulaire avec 2 champs que je valide en ajax et php. Ma requête échoue lors de l'envoie (Statut = Aborted) sans même appeler le fichier php.

J'utilise firefox comme navigateur, il ne m'affiche aucune erreur. Sur chrome c'est pareil. Par contre sur internet explorer, j'ai ce message : (SCRIPT7002: XMLHttpRequest: Erreur réseau 0x2ef3, Impossible d'effectuer l'opération à cause de l'erreur suivante 00002ef3.).

Je ne comprend pas l'origine de ce problème.

Toute aide est la bienvenue. Merci par avance !

Ci-dessous le code du formulaire et traitements :

Code html :

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

1
2
3
4
5
6
7
8
// Formulaire
<form method="post" action="action.php" id="myform">
      <input type="text" name="titre" id="titre">
      <textarea name="description" id="description" rows="5" cols="50"></textarea>
 
      <input type="submit" name="valider_q" value="Valider" class="btn_valider">
      <input type="hidden" name="id_valid">
</form>

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
// jQuery - Ajax
$(document).ready(function() {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
 
        var $this = $(this); // l'objet jquery du formulaire
 
        // Je récupère les valeurs
        var titre = $('#titre').val();
        var description = $('#description').val();
 
        // Je vérifie une première fois pour ne pas lancer la requête HTTP
        // si je sais que mon PHP renverra une erreur
        if(titre === '' || description === '') {
            document.write('Les champs doivent être remplis.');
        } else {
            $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                data: $this.serialize(),
                beforeSend: function() { // traitements JS à faire AVANT l'envoi
                    $this.after('<img src="inc/img/loader.gif" alt="loading" id="load1">'); // ajout d'un loader pour signifier l'action
                },
                success: function(data){
                    $('#status').html(data).delay(10000).hide(200);
                }
            });
        }
});

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
// PHP
require_once('db.php'); // connexion à la BD
 
if (isset($_POST['id_valid'])) { // si le formulaire est valide
   if (isset($_POST['titre']) && isset($_POST['description'])) { // champs saisis 
        $titre = $_POST['titre'])));
        $description = $_POST['description'];
 
        $q = array('titre'=>$titre, 'description'=>$description);
        $sql = "INSERT INTO question (question_titre, question_description, question_date) VALUES (:titre, :description, now())";
        $req = $db->prepare($sql);
        $req->execute($q) or die(print_r($db->errorInfo()));
        $data = $req;
 
        echo '<p class="success">Message envoyé !</p>';
    } else {
        echo 'Champs non valides';
    }
}

[ABCIWEB]

Salut,

Tant qu'à faire ce serait mieux d'utiliser la nouvelle syntaxe recommandée par jquery, basiquement :

Code :

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

1
2
3
4
5
6
7
8
9
10
$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

Le "always" n'est pas indispensable par contre le "fail" est recommandé pour avoir un retour en cas de problème et peut être tu en apprendrais plus en analysant ce retour...

Sinon tu parles de quelle version d'internet Explorer ?

A part ça faudrait vraiment remplacer ce "document.write" dont on déconseille l'utilisation depuis déjà au moins dix ans...

Côté php il faut utiliser urldecode pour récupérer une variable post transmise en ajax par serialize() car cette méthode utilise encodeURIComponent() en interne. Sinon tu risques fort d'avoir des problèmes avec les caractères spéciaux et accentués.

[mOscar007]

Salut ABCIWEB,

Merci pour cette réponse. Mais la syntaxe que tu me proposes ne me parait pas claire pour le moment.
Donc je n'ai pas envie de me donner à une autre tâche avant de corriger l'erreur dans mon et comprendre l'origine de ce problème.

Cdlt,

[mOscar007]

Je pense avoir à moitié compris le problème.

J'ai fait un test en rajoutant dans mon code JS le contentType suivant : contentType: 'html; charset=UTF-8'. Et je n'ai plus d'erreur.

Mais je ne reçois pas les données en POST . J'ai remplacé la méthode POST par GETet j'ai fait un var_dump($_GET) dans mon script PHP. Là je récupère mes données du formulaire. Ce je ne comprend toujours pas, pourquoi la méthode POST ne marche pas pourtant j'utilise la même dans mon formulaire? Est-ce que c'est normale que je reçois les données en GET issues d'un formulaire avec une méthode POST ?

Merci !

[Toufik83]

bonjour,
avez-vous essaié contentType="application/x-www-form-urlencoded; charset=UTF-8" ou contentType="plain/text" ? ==> https://www.airpair.com/js/jquery-ajax-post-tutorial
il est préférable d'utiliser dataType="json" et contentType="application/json; charset=utf-8" puis vous faites en sorte que votre fichier Php renvoi un Array X puis vous ajoutez cette ligne a la fin de votre fichier php : json_encode(votre array X);

[mOscar007]

Salut Toufik83,

Merci de me répondre !
J'ai modifié mon code en l'adaptant au format json. Je n'ai plus de problème avec ma requête Ajax. Je reçois bien mes paramètres et mes headers.
Par contre, c'est l’exécution du script php qui ne fonctionne pas. Je n'arrive pas à récupérer mes données en POST ou en GET. Si je fais un var_dump($_GET ou $_POST) au début de mon code php, il me renvoie : array (size=0) empty.

Il y a rien qui se passe après cette condition :

Code :

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

1
2
3
4
5
// PHP
if (isset($_POST['is_valid'])) { // si le formulaire est valide
  ....
}

Code :

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

1
2
3
4
5
6
7
8
9
// Formulaire
<form method="post" action="action.php" id="myform">
      <input type="text" name="titre" id="titre">
      <textarea name="description" id="description" rows="5" cols="50"></textarea>
 
      <input type="submit"  value="Valider">
      <input type="hidden" name="is_valid">
</form>

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
 
// JS
$(document).ready(function() {
    $('#myform').on('submit', function(e) {
        e.preventDefault();
 
        $.ajax({
            url: 'action.php',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({"titre": $('#titre').val(), "description": $('#description').val()}),
            processData: false,
            success: function(data, textStatus, jQxhr){
                    $('#status').html(JSON.stringify(data)).delay(10000).hide(200);
                }
            },
            error: function(jqXhr, textStatus, errorInfo){
                console.log(errorInfo);
            }
        });
    });
 });

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
 
// PHP
require_once('db.php'); // connexion à la BD
 
if (isset($_POST['is_valid'])) { // si le formulaire est valide
   if (isset($_POST['titre']) && isset($_POST['description'])) { // champs saisis 
        $titre = $_POST['titre'])));
        $description = $_POST['description'];
 
        $q = array('titre'=>$titre, 'description'=>$description);
        $sql = "INSERT INTO question (question_titre, question_description, question_date) VALUES (:titre, :description, now())";
        $req = $db->prepare($sql);
        $req->execute($q) or die(print_r($db->errorInfo()));
        $data = $req;
 
        echo '<p class="success">Message envoyé !</p>';
    } else {
        echo 'Champs non valides';
    }
}
 
$return = $_POST;
$return["json"] = $return;
json_encode($return);

Cdlt,

[Toufik83]

Code :

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

1
2
3
 
<input type="submit"  value="Valider">
<input type="hidden" name="is_valid">

l'attribut name="is_valid" doit être dans le 1er input et pas dans le 2éme, et en passant, je ne sais pas pourquoi t'utilise le 2éme input en hidden.

jQuery:

Code :

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

1
2
 
processData: false //pas la peine d'utiliser ça.

tu as aussi une accolade "}" fermante dans le success que tu dois l'enlever.

Code :

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

1
2
3
4
5
 
success: function(data, textStatus, jQxhr){
     $('#status').html(JSON.stringify(data)).delay(10000).hide(200);
                }// <== celle là
},

Php :

Code :

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

1
2
3
 
echo '<p class="success">Message envoyé !</p>';
...

pas d'echo en php quand le dataType="json", tu dois affecter la résultat a une variable qui devrait appartenir a ton array envoyé par php.

[mOscar007]

J'ai l'erreur suivante : SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data.

J'utilise le champ input de type hidden pour récupérer la session d'un utilisateur car le formulaire ne peut être utiliser que quand une session existe.
Du coup pour vérifier que mon formulaire a été saisie, la condition sur l'attribut name de l'input submit ne marche pas. C'est pour ça que j'utilise le hidden pour récupérer la valeur de la session dans l'attribut value.

[Toufik83]

Html :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html>
<head>
<title>Document sans nom</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
var retour={titre:0,description:0},rep="";
	$(function(){
 
		 $('#myform').on('submit', function(e) {
        e.preventDefault();
 		var donnee={"titre": $('#titre').val(), "description": $('#description').val()};
 		donnee = $(this).serialize() + "&" + $.param(donnee);
        $.ajax({
            url: 'action.php',
            type: 'POST',
            dataType: 'json',
            data: donnee,
            success: function(data){
			if(!data.erreur){
				retour.titre=data.titre;
				retour.description=data.description;
				rep="<br/><a>Titre :"+retour.titre+"<br/>Description :"+retour.description+"</a>";
				}
				else
				{
				rep="<a>Erreur :"+data.erreur+"</a>";
				}
				$('#status').text("").html(rep);
            },
            error: function(jqXhr, textStatus, errorInfo){
                console.log(errorInfo);
            }
        });
    });
	});
</script>
</head>
 
<body>
<form method="post" action="action.php" id="myform">
      <input type="text" name="titre" id="titre" />
      <textarea name="description" id="description" rows="5" cols="50"></textarea>
 
      <input type="submit"  value="Valider" name="valider" />
      <input type="hidden" name="is_valid" />
      <span id="status"></span>
</form>
</body>
</html>

action.php :

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
 
<?php
if(isset($_POST["titre"],$_POST["description"]) and !empty($_POST["titre"]) and !empty($_POST["description"]) ){
$titre=urldecode($_POST["titre"]);
$description=urldecode($_POST["description"]);
echo json_encode(array('titre' => $titre,'description' => $description));
}
else 
{ 
	$erreur="";
	if(empty($_POST["titre"]) || empty($_POST["description"]) ){
		if(empty($_POST["description"])){
		$erreur.='Description Vide';
		}
		if(empty($_POST["titre"])){
		$erreur.='Titre Vide';
		}
	}
 
echo json_encode(array('erreur' => $erreur) );
}
?>

[ABCIWEB]

@dinolam81

Ma remarque concernait surtout le fait de traiter le cas "fail" ou "error" (suivant la syntaxe) pour ta requête ajax.

Si tu veux conditionner le traitement php à l'existence d'une variable de session existante dans ton formulaire encore faut-il la passer dans ton formulaire :

Code :

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

<input type="hidden" name="is_valid" value="<?=$_SESSION['ma_variable']?>">

(attention de déclarer "session_start()" dans ton code php pour pouvoir faire afficher cette variable de session)



Ensuite en php côté serveur

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
<?php
session_start();
 
$is_valid = isset($_POST['is_valid']) ? urldecode($_POST['is_valid']) : null;
 
if(!empty($_SESSION['ma_variable']) && $_SESSION['ma_variable'] == $is_valid))
{
 
    if (isset($_POST['titre'],$_POST['description'])) 
    { // champs saisis 
        $titre = urldecode($_POST['titre']);
        $description = urldecode($_POST['description']);
 
        //...
 
        // si tu veux retourner ces variables
        echo json_encode(array('titre'=>$titre,'description'=>$description));
    }
}
else
{
    // on envoie un message d'erreur
    echo json_encode(array('erreur'=>'jeton de formulaire non valide'));
}

[mOscar007]

Bonjour @Toufik83, @ABCIWEB,

Je suis désolé pour le temps que j'ai mis avant de répondre.
J'ai appliqué tous ce que vous m'aviez proposé mais mon problème demeure au niveau du script PHP.
Je n'arrive toujours pas à afficher le status en cas d'échec ou de succès de ma requête :

Code :

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

$('#status').text("").html(rep);

, ni récupérer mes infos en POST dans mon fichier php. Je ne comprend pas ce problème. J'ai juste un lien sur lequel quand je clique il m'ouvre une popup ou je retrouve mon formulaire. Comme mon formulaire est dans une popup je n'ai pas de rechargement de la page, après validation j'affiche le status envoyé ou refusé et enregistre mes infos dans la base de données.

Au niveau de mes paramètres j'ai un doublon (copie d'écran) :

[Toufik83]

est ce que tu peut nous monter ton code html,jQuery et php s'il te plait?
par-ce-que l'exemple que je t'ai donné en haut, fonctionne sans aucun problème.

[mOscar007]

Salut,

Désolé @Toufik83 de te répondre tardivement je travaille sur d'autres projets en parallèle c'est pour ça j'étais occupé ces derniers jours.
J'ai enfin compris l'origine du problème. J'utilise PDO pour me connecter à la base de données SQL Server .
Du coup j'ai installé des drivers en local sur Wampserver. Avec MySQL j'utilise les fonctions suivantes pour afficher mes erreurs :

Code :

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

1
2
3
 
setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);

Avec SQL Server ça ne fonctionne pas. C'est ce qui fait que ma requête Ajax abort avant d'appeler mon fichier PHP. J'ai enlevé ses fonctions et tout marche bien.

Merci beaucoup pour votre aide @Toufik83 et @ABCIWEB.

Je vous dis à bientôt !

Cdlt,

[ABCIWEB]

Merci pour le retour