Réponse AJAX avec PHP-MVC

Version imprimable

Bonjour, je viens solliciter votre aide, je souhaite récupérer le dernier commentaire insérer pour pouvoir l'afficher sans recharger ma page. Mais sa me retourne toujours NULL, sauf que lorsque je regarde dans la partie network dans l'onglet response ma réponse est présente.

Routeur :

Code:

1
2
3
4
5
($_GET['url'] === 'postComment') {
                    if (isset($_GET['postId']) AND !empty($_GET['postId'])) {
                        if (!empty($_POST['author']) AND !empty($_POST['contents'])) {
                            $this->_frontController->postComment($_GET['postId'], $_POST['contents'], $_POST['author']);
                        }

Contrôleur :

Code:

1
2
3
4
5
6
 public function postComment($postId, $contents, $author)
    {
        $comments = $this->_comment->addCommentFromPost($postId, $contents, $author);
        echo json_encode(require './View/displayCommentsView.php');
        // require './View/displayCommentsView.php';
    }

AJAX :

Code:

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
document.getElementById("commentForm").addEventListener("submit", function (event) {
 
	event.preventDefault(); 
 
	let dataForm = new FormData(this);
 
	const xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function () {
		if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
			console.log(this);
			let result = this.response;
			comments(result);
		}
	};
	xhr.open("POST", this.action, true);
	xhr.responseType = "json";
	xhr.send(dataForm);
});
 
 
function comments(resultAjax) {
	let div = document.getElementsByClassName("displayComments");
	console.log(resultAjax);
 
}

28/08/2020, 06h30
Toufik83
Bonjour,

Citation:

Envoyé par Smlh.dev

Mais sa me retourne toujours NULL, sauf que lorsque je regarde dans la partie network dans l'onglet response ma réponse est présente.

Les variables dans l'onglet network sont celles qui ont été envoyées et pas reçues, donc la première étape est de vérifier le scipt js et utiliser des console.log et surtout voir l'onglet console aussi.

Modifies un peu La ligne 10 du code js console.log("Response ajax :",this.response);, ça donne quoi ?

Après quand je vois ça :
Code:

1 2 3 $comments = $this->_comment->addCommentFromPost($postId, $contents, $author); echo json_encode(require './View/displayCommentsView.php');
Je me demande pourquoi le require dans json_encode ? et quel est le contenu de displayCommentsView.php ? :weird:

J'imagine que le traitement de addCommentFromPost() ressemble un peu à ceci :
- exécution de la requête d’insertion...
- récupérer le dernier id inséré...
- si tout est bon, récupérer l'objet inséré en fonction du dernier id et le retourner avec return array("id"=>"id du comment","titre"=>"titre comment","date"=>"date de comment");, sinon retourne une erreur genre return array("erreurInsert"=>"Aucune insertion ....");
Donc $comments doit être l'objet qui vient d'être insérer par la méthode addCommentFromPost() (ou une erreur) pour qu'ensuite le passer en paramètre dans json_encode directement comme ça :
Code:

1 2 echo json_encode($comments);
.

Bonjour, Merci pour ta réponse.

Pour le console log à la ligne 10 du code JS ça m'affiche NULL.

Mon displayCommentFromPost ressemble à ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php
 
while($comment = $comments->fetch()) {
 
?>
    <div class="displayComments">
        <p class="author"><?= htmlspecialchars($comment['pseudo']); ?></p>
        <p class="content"><?= htmlspecialchars($comment['contents']); ?></p>
        <p class="created_at"><?= htmlspecialchars($comment['creation_date']); ?></p>
    </div>
<?php
 
}
 
$comments->closeCursor();
 
?>

et le addCommentFromPost à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public function addCommentFromPost($postId, $contents, $author) {
        $pdo = $this->getConnection();
        $result = $pdo->prepare('INSERT INTO comments(pseudo, contents, id_post, creation_date) VALUES(:pseudo, :contents, :id_post, NOW())');
        $result = $result->execute(array(
            'pseudo' => $author,
            'contents' => $contents,
            'id_post' => $postId
        ));
        $commentId = $pdo->lastInsertId();
        $comment = $pdo->prepare('SELECT id,pseudo,contents,creation_date FROM comments WHERE id= ?');
        $comment->execute([$commentId]);
        return $comment;
 
    }

Lorsque je fais un echo json_encode($comments); j'ai toujours null dans la console et dans le network ça m'affiche ma requête SELECT.

le require dans le json_encode que j'ai effectué c'était pour récupérer la div que contient mon fichier displayCommentsView.php pour pouvoir l'insérer avec javascript par la suite.

Bonjour,

tu te complique la tâche plus qu'elle l'est, commence d'abord par modifier la dernière partie du code de la méthode addCommentFromPost :

Code:

1
2
3
4
5
6
7
8
9
10
 
public function addCommentFromPost(...){
....
$commentId = $pdo->lastInsertId();
$comment = $pdo->prepare('SELECT id,pseudo,contents,creation_date FROM comments WHERE id= ?');
$comment->execute([$commentId]);
return $commentId>0
         ?$comment->fetch(PDO::FETCH_ASSOC)
         :array("erreurInsert"=>"Aucune insertion n'a été effectuée.");
}

Après tu modifies la méthode postComment comme ça :

Code:

1
2
3
4
5
6
 
 public function postComment($postId, $contents, $author)
    {
        $comments = $this->_comment->addCommentFromPost($postId, $contents, $author);
        echo json_encode($comments);
    }

Puis tu manipules les données au niveau js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
xhr.onreadystatechange = function() {
	if (this.readyState == 4) { // `DONE`
		if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
			if(this.response) {
                             console.log('Succès :',this.response);
                             comments(this.response);
                        }
			else console.error("Une erreur s'est produite lors de l'insertion.");
		}
	}
}

Que vois-tu dans la console du navigateur après ces modifications ?

31/08/2020, 11h19
Smlh.dev

Bonjour,

Ah oui d'accord merci beaucoup là j'ai bien le retour dans ma console avec le dernier commentaire insérer et je comprends mieux ou été mon erreur.