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,