使用 Ajax 无尽的滚动。内容仅在第一次加载,但不会通过滚动加载。
怎么了?
jQuery:
function loadFeed() {
$.ajax({
url: 'loadmore.php',
dataType: 'html',
success: function (data) {
$("#posts").append('<div class="havanagila"></div>');
$('#posts').html(data);
}
});
}
loadFeed();
$(window).scroll(function () {
var windowScroll = $(window).scrollTop();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
if ((windowScroll + windowHeight) == documentHeight) {
loadFeed();
}
});
<?php
session_start();
if ( isset( $_SESSION['login'] ) ) {
$login = $_SESSION['login'];
$id=$_SESSION['id'];
$username="root";
$password="root";
$hostname = "localhost";
$dbname= "kotik";
function testdb_connect ($hostname, $username, $password){
$dbh = new PDO("mysql:host=$hostname;dbname=kotik", $username, $password);
return $dbh;
}
try {
$dbh = testdb_connect ($hostname, $username, $password);
} catch(PDOException $e) {
echo $e->getMessage();
}
}
?>
<?php
$title_select_query= $dbh -> prepare("SELECT title FROM books WHERE id = :id ORDER BY date DESC");
$title_select_query ->execute(array(':id' => $id));
$title_select_query_result = $title_select_query->fetchColumn();
echo($title_select_query_result);
$title_select_query_result = $title_select_query->fetchColumn();
echo($title_select_query_result);
$title_select_query_result = $title_select_query->fetchColumn();
echo($title_select_query_result);
$title_select_query_result = $title_select_query->fetchColumn();
echo($title_select_query_result);
$title_select_query_result = $title_select_query->fetchColumn();
echo($title_select_query_result);
?>
因为你替换了 $('#posts') 的内容,所以在 scroll => 上的第一个 ajax 请求后文档的高度不会改变,所以你需要向上滚动,然后再次向下滚动以触发另一个 ajax 请求。
因为不知道预期的页面布局,所以我将给出一个简单的基本演示
HTML JSFiddle demo
<div id="main" style="height:200px; overflow-y : auto;">
<div id="posts">
</div>
</div>
var loadmoore = true,
loaded_posts =0 ;
function gent_sample_data(num_posts){
var i,
sample_data = '';
for(i=0;i<num_posts;i++) {
sample_data += "<p class'post'>title_select_query_result " + (loaded_posts + i) + "</p>";
}
return sample_data;
}
function loadFeed(){
// generate sample data
var sample_data = gent_sample_data(15);
loaded_posts = loaded_posts + 15;
$.ajax({
url : '/echo/html/',
dataType: 'html',
type: 'post',
data: {'html':sample_data},
success: function(returnhtml){
console.log(returnhtml);
// option 1 - add result into "havanaglia" div
// var $post = $('<div class="havanagila"></div>');
// $post.html(returnhtml);
// $("#posts").append($post);
// option 2 - ad result after "havanaglia" div
$("#posts").append('<div class="havanagila"></div>');
$("#posts").append(returnhtml);
loadmoore = true;
}
});
}
loadFeed();
$("#main").scroll(function () {
if (loadmoore && $("main").scrollTop() >= ($("main").height()-100) ) {
loadmoore = false;
loadFeed();
}
});
var loadmoore= true;
function loadFeed() {
$.ajax({
url: 'loadmore.php',
dataType: 'html',
success: function (data) {
var $havanaglia = $('<div class="havanagila"></div>');
$havanaglia.html(data);
$("#posts").append($havanaglia);
loadmoore = true;
}
});
}
loadFeed();
$(window).scroll(function () {
if (loadmoore && $(window).scrollTop() >= $(document).height() - $(window).height()-100) {
loadmoore= false;
loadFeed();
}
});
关于javascript - AJAX 功能不能通过滚动工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30001920/
欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) | Powered by Discuz! X3.4 |