Enregistrer des données dans une table mysql via ajax

**TBA_78** · 10/03/2021, 16h23

Bonjour,

J'essai d'insérer des données dans une table mysql via ajax et cela ne fonctionne pas alors je fais:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(".frmComment").submit(function() {
 
$.ajax({
method: "POST",
url"../content/insertComment.php",
data: $(".frmComment").serialize(),
})
.done(function() {
$(".return").html("<link rel='stylesheet' type='text/css' href='../content/bootstrap-5.0.0-alpha3-dist/css/bootstrap.min.css'><p class='alert-success p-3 rounded text-center col-lg-4'>Votre commentaire a bien été enregistré !</p>")
})
return false;
});

Mon php:

Code php :

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

1
2
3
4
5
6
require_once '../controller/dbConfig.php';
 
            $stmt3 = $conn->prepare('UPDATE demandes SET myComment = ? WHERE demande_id = ?');
            $stmt3->bind_param('si', $_POST['myComment'], $_POST['hidden_demande_id']);
            $stmt3->execute();
            $stmt3->close();

Mon formulaire:

Code html :

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

1
2
3
4
5
6
7
8
9
10
<form action="" method="POST" name="frmComment" class="frmComment" id="frmComment">
                        <input type="hidden" name="hidden_demande_id" value="<?php echo $demande_id; ?>">
                        <div class="col">
                            <textarea class="col-lg-4 mb-1 myComment" name="myComment" id="myComment"></textarea>
                        </div>
                        <div class="col">
                            <button class="btn btn-secondary float-left" type="submit" name="regComment"
                                id="regComment">Enregistrer</button>
                        </div>
                    </form>

Je précise que mon php fonctionne bien et enregistre bien mes données dans ma table si je ne passe pas par ajax.

Rien ne se passe et dans l'onglet network du débogueur quand je clique sur insertComment.php il n'y a rien donc pas d'erreur.

Je vous remercie de votre aide

**mathieu** · 11/03/2021, 00h34

si vous ne voyez pas de requête AXAJ dans l'onglet "réseau", c'est qu'il y a un souci dans le code javascript donc c'est là que vous devez débuguer.

**Toufik83** · 11/03/2021, 00h54

Bonjour,

Il faut toujours utiliser le callback fail d'ajax pour t'assurer qu'il n'y a aucune erreur, et utiliser les arguments (data et err dans l'exemple) et aussi des console.log ou alert.

Si l'insertion dans la base de donnée n'est pas effectuée, le message <p class='alert-success p-3 rounded text-center col-lg-4'>Votre commentaire a bien été enregistré !</p> s'affichera toujours, ce qu'il ne faut pas et donc tu dois générer le message en PHP et pas en js.

Puis je ne vois pas l'intérêt de recharger le <link /> de bootstrap à chaque succès d'ajax, pourquoi ne pas le mettre tout au début de la page dans <head> tout simplement ou peu import ?

Si tu utilises mysqli, as-tu essayé d'insérer des caractères spéciaux dans les commentaires par exemple ? aucun problème d'encodage ?

Exemple :

JS :

Code :

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

1
2
3
4
5
6
7
8
 
.done(function(data) {
    console.log("Done :",data);//cette ligne doit apparaitre dans la console du navigateur.
    $(".return").html(data);//le message du fichier php est enregistré dans data
})
.fail(function(err){
   alert("Erreur ajax :"+err);
});

PHP :

Code :

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

1
2
3
4
5
6
 
... 
$stmt3->execute();
if($stmt3->affected_rows>0) echo "<p class='alert-success p-3 rounded text-center col-lg-4'>Votre commentaire a bien été enregistré !</p>";
else echo "<p class='alert-danger'>Aucune modification n'a été effectuée !</p>";
$stmt3->close();

**TBA_78** · 11/03/2021, 08h29

Merci à vous deux pour vos réponses .fail ne me renvoie aucune erreur ajax et je n'ai pas de problème de caractères spéciaux alors je vais continuer à chercher.

**Toufik83** · 11/03/2021, 13h57

J'ai oublié un truc très important, la page est rechargée quand tu cliques sur le bouton submit, car il n'y a aucun preventDefault() dans ton code.

Ajoutes là avant l'appel d'ajax :

Code :

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

1
2
3
4
5
 
$(".frmComment").submit(function(event) {
   event.preventDefault();//empêcher le rechargement de la page
   $.ajax(....)
});

**TBA_78** · 12/03/2021, 16h00

Maintenant l'enregistrement des données se fait bien sans recharger la page mais pour la récupération, il faut la recharger.

Code js :

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
 
  $(document).ready(function() {
      getCommentaire();
$(".frmComment").submit(function(event) {
              event.preventDefault();
 
              $("#myComment").val().replace(/<|>/g, "") // prevent xss;
 
              $.ajax({
                  method: "POST",
                  url: "../content/insertComment.php",
                  data: $(".frmComment").serialize(),
              })
 
              .done(function(data) {
                      console.log("Done :", data);
                      $(".return").html(data);
                  })
                  .fail(function(err) {
                      alert("Erreur ajax :" + err);
                  });
              return false;
          });
      });
 
      function getCommentaire() {
          let searchParams = new URLSearchParams(window.location.search)
          searchParams.has('demande_id')
          let demande_id = searchParams.get('demande_id')
          console.log(demande_id);
 
          $.ajax({
              method: 'POST',
              url: '../content/recupComment.php',
              data: { "demande_id": demande_id },
              success: function(data) {
                  $(".afficher").html(data);
              }
          });
      }
         });

Enregistrer des données dans une table mysql via ajax

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager