requête ajax pour un insert dans une DB, renvoie "empty String"

**Cisman** · 09/02/2020, 22h54

Bonjour,

je fais une todo list, avec comme technologie, ajax, jQuery, PHP.

J'ai un formulaire pour rentrer une tâche:

Code HTML :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!-- Ajout nouvel tâche fenêtre Modal -->
        <div class="modal fade" id="addTaskModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
 
                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Ajout nouvelle tâche</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
 
                    <!-- Modal body -->
                    <div class="modal-body px-4">
                        <form action="" method="POST" id="form-data">
                            <div class="form-group">
                                <input type="text" name="title" placeholder="Titre" required>
                                <label for="title">Titre de votre tâche</label>
                            </div>
                            <div class="form-group">
                                <textarea rows="4" cols="45" name="description" placeholder="Description">Description de votre tâche</textarea>
                            </div>
                            <div class="form-group">
                                <input type="color" name="importance" >
                                <label for="importance">Choisissez une couleur</label>
                            </div>
                            <div class="form-group"> 
                                <input type="date" name="due_date" placeholder="Date d'échéance">
                                <label for="due_date">Date d'échéance</label>
                            </div>
                            <div class="form-group">  
                                <input type="date" name="start_date" placeholder="Débute le" required>
                                <label for="start_date">Date de départ</label>
                            </div>
                            <div class="form-group">
                                <input type="text" name="parent" placeholder="Tâche parent">
                                <label for="parent">Tâche parent</label>
                            </div>
                            <div class="form-group">                               
                                <span>
                                    <select name="status" class="form-control">
                                        <option value="a_faire">à faire</option>
                                        <option value="en_cours">en cours</option>
                                        <option value="achevee">achevée</option>
                                        <option value="un_jour_peut_etre">un jour peut-être</option>
                                    </select>
                                </span>
                            </div>
                            <div class="form-group">
                                <input type="text" name="category" placeholder="Catégorie">
                                <label for="category">Catégorie</label>
                            </div>                          
                            <div class="form-group">
                                <input type="text" name="prerequisite" placeholder="Prérequis">
                                <label for="prerequisite">Prérequis</label>
                            </div>
                            <div class="form-group">  
                                <input type="date" name="created_at" placeholder="Créé le" required>
                                <label for="created_at">Date de création</label>
                            </div>
                            <div class="form-group">
                                <input type="date" name="updated_at" placeholder="Mis à jour le">
                                <label for="updated_at">Date de mise à jour</label>
                            </div>
                            <div class="form-group">
                                <input type="date" name="end_date" placeholder="Date de fin">
                                <label for="end_date">Date de fin</label>
                            </div>
                            <div class="form-group">
                                <input type="time" name="estimated_time" placeholder="Temps estimé">
                                <label for="estimated_time">temps estimé</label>
                            </div>
                            <div class="form-group">
                                <input type="number" name="display_order" placeholder="position d'affichage">
                                <label for="display_order">ordre d'affichage</label>
                            </div>
                            <div class="form-group">
                                <input type="submit" name="insert" id="insert" value="Ajout tâche" class="btn btn-primary btn-block">
                            </div>
                        </form>
                    </div>
 
                </div>
            </div>
        </div>

Ma requête ajax:

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
//requête ajax pour l'insert d'une tâche lors d'un clic sur le boutton "Ajouter une tâche"
                $("#insert").click(function (e) {
                    if ($("#form-data")[0].checkValidity()) {
                        e.preventDefault();
                        $.ajax({
                            url: "controller.php",
                            type: "POST",
                            data: $("#form-data").serialize() + "& action=insert",
                            success: function (data) {
                                console.log(data);
                                alert('success');
                            },
                            error: function () {
                                alert('error');
                            }
                        });
                    }
                });

j'ai bien la fenêtre success qui s'ouvre, mais ça me renvoi empty String et aucune nouvelle entrée dans ma DB.

Mon controller:

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
if(isset($_POST['action']) && $_POST['action'] == "insert"){
    //$id = uniqid($prefix = "id", $more_entropy = true);//génération UUID comme id d'une tâche.
    $title = $_POST['title'];
    $description = $_POST['description'];
    $importance = $_POST['importance'];
    $due_date = $_POST['due_date'];
    $start_date = $_POST['start_date'];
    $parent = $_POST['parent'];
    $status = $_POST['status'];
    $category = $_POST['category'];
    $prerequisite = $_POST['prerequisite'];
    $created_at = $_POST['created_at'];
    $updated_at = $_POST['updated_at'];
    $end_date = $_POST['end_date'];
    $estimated_time = $_POST['estimated_time'];
    $display_order = $_POST['display_order'];
 
    $db->insert($title, $description, $importance, $due_date, $start_date, $parent, $status, 
            $category, $prerequisite, $created_at, $updated_at, $end_date, $estimated_time, $display_order);
}

et enfin mon model avec la fonction insert:

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
private $db = "mysql:host=localhost;dbname=todo_list";
    private $user = "root";
    private $psw = "password";
    public $conn;
 
    //Constructeur
    public function __construct() {
        try {
            $this->conn = new PDO($this->db, $this->user, $this->psw);
            //echo 'Connexion réussie!';
        } catch (PDOException $e) {
            echo $e->getMessage();
        }
    }
 
    //Fonction qui insert une tâche dans la DB
    public function insert($title, $description, $importance, $due_date, $start_date,
            $parent, $status, $category, $prerequisite, $created_at, $updated_at, $end_date, $estimated_time, $display_order) {
        $sql = "INSERT INTO tasks (title, description, importance, due_date, start_date, 
            parent, status, category, prerequisite, created_at, updated_at, end_date, estimated_time, display_order) 
            VALUES (:title, :description, :importance, :due_date, :start_date, :parent, :status, :category, 
            :prerequisite, :created_at, :updated_at, :end_date, :estimated_time, :display_order)";
        $stmt = $this->conn->prepare($sql);
        $stmt->execute(['title' => $title, 'description' => $description, 'importance' => $importance, 'due_date' => $due_date, 'start_date' => $start_date,
            'parent' => $parent, 'status' => $status, 'category' => $category, 'prerequisite' => $prerequisite, 'created_at' => $created_at,
            'updated_at' => $updated_at, 'end_date' => $end_date, 'estimated_time' => $estimated_time, 'display_order' => $display_order]);
        return true;
    }

J'ai essayé avec et sans id, au début, je générais un UUID en PHP, j'ai retirer ça et essayé avec un id autoIncrement, mais j'ai toujours le même résultat.

Invité · 09/02/2020, 23h02

Bonjour,

Code :

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

      data: $("#form-data").serialize() + "& action=insert",

Espace en trop avant action.

Invité · 10/02/2020, 10h39

Bonjour,

Il va falloir apprendre à déboguer toi-même...

1- requête ajax:

Code :

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

1
2
3
                            success: function (data) {
                                console.log(data);
                            },

Si tu veux pouvoir récupérer quelque chose dans data, il faut faire un echo dans le fichier PHP.

2- controller:

Code PHP :

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

1
2
3
4
5
6
if(isset($_POST['action']) && $_POST['action'] == "insert"){
...
    echo 'INSERT EN COURS... : ';
    echo $db->insert($title, $description, $importance, $due_date, $start_date, $parent, $status, 
            $category, $prerequisite, $created_at, $updated_at, $end_date, $estimated_time, $display_order);
}

3- fonction insert:
Généralement pour un INSERT en BDD, on récupère le "lastInsertId" (plutôt que true)
Et pour gérer les erreurs PDO, on utilise try catch (voir : PDO une soupe et au lit !)

Code PHP :

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

1
2
3
4
5
6
7
8
    public function insert(...............) {
   try{
...
        return $db->lastInsertId();
   catch(Exception $e){
        return "Erreur ! " . $e->getMessage() . "<br/>";
   }
}

Avec ça, tu devrais avoir des infos utiles.

**Cisman** · 10/02/2020, 20h43

Bonjour, et merci pour vos réponses.

En général, j'essaie de débogger moi-même, avant de demander de l'aide, mais là, je dois dire, que je n'ai aucune info sur le pourquoi mon insert ne se fait pas.

Code :

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

1
2
3
success: function (response) {
                                console.log(response);
                            },

me renvoi 1. et j'ai bien mis un echo $response dans mon PHP.

Code php :

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

1
2
echo $db->insert($title, $description, $importance, $due_date, $start_date, $parent, $status, 
            $category, $prerequisite, $created_at, $updated_at, $end_date, $estimated_time, $display_order);

l'echo de l'insert en cours, ne me renvoi rien du tout.

Code php :

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

1
2
3
4
5
6
7
8
  public function insert(...............) {
   try{
...
        return $db->lastInsertId();
   catch(Exception $e){
        return "Erreur ! " . $e->getMessage() . "<br/>";
   }
}

même avec le try catch, tout ce passe correctement, du coup il ne passe pas dans le catch.

Entre temps, j'ai testé les variables qui viennent de mon formulaire et tout est normal de ce côté.
J'ai aussi essayé en hardcodant les variables, mais ça ne va pas mieux.
J'ai aussi été voir les MySQL log, mais ils ne m'affichent aucunes erreurs.

Donc mon plus gros problème est l'absence d'indices, qui pourrait me mettre sur la voie.

Envoyé par jreaux62

Bonjour,

Code :

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

      data: $("#form-data").serialize() + "& action=insert",

Espace en trop avant action.

Sans l'espace, ça ne change rien.

**Toufik83** · 10/02/2020, 22h16

Envoyé par Cisman

me renvoi 1. et j'ai bien mis un echo $response dans mon PHP.

Puis après

Envoyé par Cisman

l'echo de l'insert en cours, ne me renvoi rien du tout.

Déjà il faut ajouter les deux points ( : ) avant les indexes du tableau de $stmt->execute() :

Code php :

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

1
2
3
4
 
$stmt->execute([':title' => $title, ':description' => $description, ':importance' => $importance, ':due_date' => $due_date, ':start_date' => $start_date,
            ':parent' => $parent, ':status' => $status, ':category' => $category, ':prerequisite' => $prerequisite, ':created_at' => $created_at,
            ':updated_at' => $updated_at, ':end_date' => $end_date, ':estimated_time' => $estimated_time, ':display_order' => $display_order]);

Tu n'as pas un champ dans la table NOT NULL que tu ne met pas dans la requête ?

**Cisman** · 10/02/2020, 22h27

tous les champs NOT NULL sont dans ma requête.

Nom : db.JPG
Affichages : 592
Taille : 160,4 Ko

**Toufik83** · 10/02/2020, 23h16

Bon je viens de tester en locale et l'insertion fonctionne.

Le tout est dans un seul fichier...(je sais que tu met un require/include pour accéder à la classe myPDO ):

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<?php
class myPDO{
    private $db = "mysql:host=localhost;dbname=todo_list";
    private $user = "root";
    private $psw = "password";//password est le mot de passe de mysql ?
    public $conn;//pk en public, il faut créer une fonction public getDb() pour récupérer cet attribut (qui doit être private)
 
    //Constructeur
    public function __construct() {
        try {
            $this->conn = new PDO($this->db, $this->user, $this->psw,[PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"]);
	    $this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            //echo 'Connexion réussie!';
        } catch (PDOException $e) {
            echo $e->getMessage();
        }
    }
 
    //Fonction qui insert une tâche dans la DB (Normalement cette méthode doit être dans une autre classe "tacheManager" et pas ici ...)
    public function insert($title, $description, $importance, $due_date, $start_date,
            $parent, $status, $category, $prerequisite, $created_at, $updated_at, $end_date, $estimated_time, $display_order) {
        $sql = "INSERT INTO tasks (title, description, importance, due_date, start_date, 
            parent, status, category, prerequisite, created_at, updated_at, end_date, estimated_time, display_order) 
            VALUES (:title, :description, :importance, :due_date, :start_date, :parent, :status, :category, 
            :prerequisite, :created_at, :updated_at, :end_date, :estimated_time, :display_order)";
        $stmt = $this->conn->prepare($sql);
        $stmt->execute([':title' => $title, ':description' => $description, ':importance' => $importance, ':due_date' => $due_date, ':start_date' => $start_date,
            ':parent' => $parent, ':status' => $status, ':category' => $category, ':prerequisite' => $prerequisite, ':created_at' => $created_at,
            ':updated_at' => $updated_at, ':end_date' => $end_date, ':estimated_time' => $estimated_time, ':display_order' => $display_order]);
        return $this->conn->lastInsertId();//Ici c'est $this->conn->last..., souviens toi que tu es dans une classe ici !
    }
}
 
//début récupération des variables post 
if(isset($_POST['action']) && $_POST['action'] == "insert"){
    //$id = uniqid($prefix = "id", $more_entropy = true);//génération UUID comme id d'une tâche.
    $title = $_POST['title'];
    $description = $_POST['description'];
    $importance = $_POST['importance'];
    $due_date = $_POST['due_date'];
    $start_date = $_POST['start_date'];
    $parent = $_POST['parent'];
    $status = $_POST['status'];
    $category = $_POST['category'];
    $prerequisite = $_POST['prerequisite'];
    $created_at = $_POST['created_at'];
    $updated_at = $_POST['updated_at'];
    $end_date = $_POST['end_date'];
    $estimated_time = $_POST['estimated_time'];
    $display_order = $_POST['display_order'];
 
    $db=new myPDO();
 
    echo $db->insert($title, $description, $importance, $due_date, $start_date, $parent, $status, 
            $category, $prerequisite, $created_at, $updated_at, $end_date, $estimated_time, $display_order);
}

Mais c'est quoi cet interclassement utf8mb4_0900_ai_ci ?, je l'ai pas trouvé dans la liste. moi j'utilise utf8mb4_general_ci pour les tables et les champs aussi.

**Cisman** · 09/02/2020, 23h08

bonsoir et merci de répondre aussi vite.

ça ne m'affiche plus empty String, mais je n'ai toujours pas de nouvelle entrée dans ma DB.

requête ajax pour un insert dans une DB, renvoie "empty String"

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager