Tri d'articles de blog avec ajax
Bonjour,
Je ne connais pas encore bien Ajax et j'essaye quelque chose de simple sans y arriver..
J'ai une liste d'articles (chaque article ayant une catégorie associée) qui s'affiche sur ma page web comme ceci:
CODE HTML
Code:
1
2
3
| <div class="thearticles">
<?php include('javascripts/getAllArticles.php'); ?>
</div> |
CODE PHP
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
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
| <?php
$reponse = $bdd->query('SELECT * FROM blog_article');
while ($donnees = $reponse->fetch()) {
?>
<article>
<div class="article-title">
<h3><?php echo $donnees['titre']; ?></h3>
</div>
<span class="article-category">
<i class="fa fa-tag fa-rotate-90" aria-hidden="true"></i>
<?php
$idcat=$donnees['id_categorie'];
$categ = $bdd->query("SELECT * FROM blog_categorie WHERE id = $idcat");
while ($cat = $categ->fetch()) {
echo $cat['label'];
}
?>
</span>
<hr>
<div class="article-content">
<span class="article-post">Posté le <?php echo $donnees['date_creation']; ?></span>
<p><?php echo $donnees['contenu']; ?></p>
<?php
$idArticle = $donnees['id'];
?>
<a href="article.php?page=<?php echo $idArticle; ?>" class="article-suite">Lire la suite ...</a>
</div>
<div class="article-img">
<img src="<?php echo $donnees['url_img']; ?>" />
</div>
<span class="article-share-item"> Partager</span>
</article>
<?php
}
$reponse->closeCursor();
?> |
J'ai la liste de toutes les catégories possible qui s'affiche également sur ma page:
CODE HTML
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
| <div class="categories">
<h4>Catégories</h4>
<hr>
<ul>
<?php
$reponse = $bdd->query('SELECT label FROM blog_categorie');
while($donnees = $reponse->fetch()) {
// echo '<li class="categories-item"><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li>';
echo '<a href="#" class="categories-item"><li><i class="fa fa-square" aria-hidden="true"></i>'. $donnees['label'] . '</li></a>';
}
$reponse->closeCursor();
?>
</ul>
</div> |
Et j'aimerais qu'en cliquant sur une des catégories, j'affiche uniquement les articles de cette catégorie. Donc si j'ai bien compris pour faire ça, il faut passer par ajax et il faudrait que je puisse charger un script PHP dans ma balise thArticles qui récupère la catégorie cliquée et les articles associés... Quelque chose comme ceci:
CODE JQUERY
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
26
27
28
29
30
31
32
33
34
35
| <script>
$(document).ready(function(){
$(".categories-item").on('click',function(){
alert($(this).text());
var result = $('.theArticles');
// un objet XmlHttpRequest est instancié
$.ajax({
url: 'javascripts/getArticlesByCategory.php', // ressource cible
type: 'GET', // type de la requete HTTP, on récupère du serveur, valeur par défaut pas obligé de l'instancier
//data: {LaCategorie: $(this).html()},
success : function(data){ // success est toujours en place, bien sûr !
// Informe l'utilisateur que l'opération est terminé et renvoie le résultat
result.html(data);
// J'écris le résultat prénom de l'élève dans le h1
$(.thearticles).html(data);
},
error : function(){
result.html("Désolée, aucun résultat trouvé.");
}
});
});
});
</script> |
Mais je ne suis pas sûre de comprendre comment définir ce "data": est-ce la catégorie cliquée que l'on veut passer en paramètre du script PHP? et comment afficher le résultat PHP dans la balise theArticles...
Je vous remercie d'avance pour votre aide.
