Charger Plus de Contenu à l'aide d'Ajax/jQuery par retour <div>
Je travaille sur un site de réseau social à quelque chose comme facebook où lorsque vous faites glisser vers le bas de la page, un nouveau contenu à charger. Au lieu de cela, ma page aura plus de bouton au lieu de défilement. Chaque fois qu'un utilisateur cliquez sur le bouton "plus", le nouveau contenu vous permettra de charger à fond.
Ma page se composent de trois colonnes différentes. Donc, ce que je voudrais faire est d'ajouter 3 nouveaux contenus différents à ces 3 colonnes lorsque le bouton "plus" est cliqué.
Je voudrais revenir une nouvelle div contenu à l'intérieur de la colonne principale div à l'aide d'ajax et php. Quelque chose comme ce ci-dessous.
<div class='content_3'>
<div class='widget'>
Content Here
</div>
</div>
Ci-dessous est un exemple de ma page... Violon ici http://jsfiddle.net/Lqetw5ck/2/
<div id='main_column_1'>
<div id='content_1'>
Load data from php/mysql database (For 1st Main Div)
</div>
<div id='content_2'>
Load more from php/mysql database when 'more' button is click
</div>
</div>
<br>
<div id='main_column_2'>
<div id='content_1'>
Load data from php/mysql database (For 2nd Main Dev)
</div>
<div id='content_2'>
Load more from php/mysql database when 'more' button is click
</div>
</div>
<br>
<div id='main_column_3'>
<div id='content_1'>
Load data from php/mysql database (For 3rd Main Dev)
</div>
<div id='content_2'>
Load more from php/mysql database when 'more' button is click
</div>
</div>
<button>Show More</button>
Et comment dois-je écrire mon code PHP? Parce que je vais revenir ensemble de la div contenu. L'idée que j'avais est quelque chose comme ce ci-dessous.
<?
$sql_stmt = "SELECT * FROM customers";
$sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con));
$row = mysqli_fetch_assoc($sql);
$content = '<div class="content_3"><div class="widget"> '.$row['firstname'].' </div></div>';
?>
Je veux retourner la somme de chaîne de contenu à la colonne 1, 2 et 3 de sorte qu'il affiche un nouveau div en vertu de cette colonne.
Merci!
EDIT: j'ai trouvé ce Comment mettre en œuvre jScroll? mais ne savez pas comment l'auteur a écrit son code PHP. Peut-être que c'est presque la même que mon cas?
OriginalL'auteur nodeffect | 2014-09-05
Vous devez vous connecter pour publier un commentaire.
Je suis heureux de vous montrer une crue de la mise en œuvre sur vous la question:
1. Faire un serveur-côté
data.php
pour servir des données:Après cela, vous pouvez récupérer les données paginées à la demande avec l'url:
/data.php?page_index=1&page_size=10
pour les données de la première page, et/data.php?page_index=2&page_size=10
pour la deuxième page de données;et ainsi de suite.
2. Faire de la fonction d'extraction avec jQuery
3. Lier l'événement à déclencher
fetch_page
.Nous voulons la
fetch_page
de se déclencher lorsque le cas ci-dessous correspond à:more
bouton.Vous pouvez décider de la deuxième ou de la troisième effet est meilleur, et je vais vous montrer la mise en œuvre:
De sorte que vous pouvez essayer de code, l'effet de cette manière, il n'est pas trop difficile, essayer, bonne chance!
OriginalL'auteur Alfred Huang
Limite De Décalage
C'est deux choses que vous avez à comprendre la première fois quand la page charge il est chargé comme ceci:
Deuxième fois lors de l'afficher plus de clic de bouton, il envoie la valeur de
Limit
etOFFSET
Code doit être backend comme:
OriginalL'auteur Manwal
http://jsfiddle.net/Lqetw5ck/4/
HTML
JS
Ce qui pourrait vous aider pour la création d'une interface utilisateur vue de chargement des données.
Vous pouvez faire du php à l'aide de Manwal la réponse de
OriginalL'auteur Cybersupernova