Voir le flux RSS

Blog de CinéPhil

Lien "Lire la suite" en Ajax

Noter ce billet
par , 31/01/2017 à 13h22 (350 Affichages)
Nota : Ce billet est le transfert du billet identique de mon ancien blog car j'ai constaté que du code avait été perdu. Il m'a été signalé en commentaire sur l'ancien blog que ce code serait mieux avec PDO mais flemme de le corriger maintenant.

On trouve les liens de type "Lire la suite" notamment sur les blogs, comme ici, ou sur les CMS.

On peut se contenter d'importer dans la page la totalité des textes, n'en afficher que les premières lignes et ajouter un lien qui affiche la totalité du texte à l'aide d'un programme Javascript.
L'inconvénient d'une telle méthode est qu'on alourdit le chargement de la page alors que l'utilisateur ne cliquera peut-être sur aucun lien.

J'ai opté récemment pour une démarche différente : chargement uniquement des premières lignes des textes à afficher et lien qui active un programme Ajax pour récupérer depuis le serveur l'intégralité du texte demandé par l'utilisateur.
Je décris le principe ci-après, en le simplifiant par rapport à ce que j'ai réellement mis en œuvre...

1) Récupération du début des textes à afficher
La requête SQL ci-dessous ne récupère que les 200 premiers caractères des textes, par exemple de l'auteur dont l'identifiant est 12 :
Code PHP : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
$sql = " 
	SELECT txt_id, 
	LEFT(txt_contenu, 200) AS debut_texte 
	FROM texte 
	WHERE txt_auteur_id = 12 
"; 
 
$result = mysql_query($sql); 
 
while($row = mysql_festch_array($result)) 
{ 
	$texte["{$row['txt_id']}"] = $row['debut_texte']; 
}

2) Affichage dans la page
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
<?php
// début de l'affichage non donné ici
 
foreach($texte as $id_texte => $val) 
{ 
?> 
	<div id="texte<?php echo $id_texte; ?>" class="text_content"> 
		<?php echo $val; ?>
		... 
		<a href="javascript:suite(<?php echo $id_texte; ?>)"> 
			Lire la suite 
		</a> 
	</div> 
<?php
}
?>

3) La fonction Ajax/Javascript appelée par le lien
Code Javascript : 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
function suite(id_texte) 
{ 
	$.ajax 
	({ 
		url: "ajax/suite.php", 
		global: false, 
		type: "POST", 
		data: ({idtexte: id_texte}), 
		dataType: "html", 
		async: true, 
		success: function (retour) 
		{ 
			$("#texte"+id_texte).html(retour); 
		} 
	}); 
}

4) Le programme Ajax/PHP qui récupère l'intégralité du texte
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
include_once('connexion_bdd.php');
 
$idtexte = intval($_POST['idtexte']);
 
$sql = "
	SELECT txt_contenu 
	FROM texte 
	WHERE txt_id = $idtexte 
"; 
 
$result = mysql_query($sql);
 
$html = $row['message'];
 
// On peut ajouter ici un lien pour réduire le message complet à son résumé.
 
echo $row['message']; 
?>

Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Viadeo Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Twitter Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Google Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Facebook Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Digg Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Delicious Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog MySpace Envoyer le billet « Lien "Lire la suite" en Ajax » dans le blog Yahoo

Mis à jour 28/09/2017 à 00h00 par CinePhil

Catégories
Javascript , PHP , Développement Web , Javascript / Ajax

Commentaires