我的 PHP 从 MySQL 抓取数据并将其显示在我的 index.php 的容器 div 中，没有问题。但是，数据会一个接一个地显示（不同的行），而不是使用同一行中的可用空间。所以我把float改成了float:left; 但现在它只是一次性加载所有内容，而不会到达页面末尾。
我相信我的问题出在JavaScript中，因为在浮点数发生变化之前；原来是每行一项，现在是每行三项。并且，JS使用 id 来计算何时调用 PHP 加载脚本。
这是在 body 标记中用作整体容器的 div 的 index.php 片段。第二个 div 用于无限滚动功能，当用户到达屏幕末尾时加载更多数据。
<div id="postedComments">
<?php require_once 'jquery-masterLoader.php' ; ?>
</div>
<div id="loadMoreComments" style="display:none;" > <center>test for hidden field </center>
</div>
这是 PHP jquery-masterLoader.php，它是控制加载脚本的两个 PHP 文件之一。另一个对于 show 和 tell 来说不是必需的，因为它仅在用户到达屏幕末尾时才被调用。
<?php
if ( strpos(strtolower($_SERVER['SCRIPT_NAME']),strtolower(basename(__FILE__))) ) {
header("Location: index.php");
die("Denny access");
}
error_reporting(0) ;
set_exception_handler('exception_handler') ;
$config = parse_ini_file("core/config/my.ini") ;
$db=new mysqli($config['dbLocation'] , $config['dbUser'] , $config['dbPassword'] ,
$config['dbName']);
if(mysqli_connect_error()) {
throw new Exception("<b>Could not connect to database</b>") ;
}
if (!$result = $db->query("SELECT * FROM world_country ORDER BY id ASC LIMIT
0,30")) {
throw new Exception("<b>Could not read data from the table </b>") ;
}
while ($data = $result->fetch_object()) {
$id = $data->id;
$name = $data->Name ;
$continent = $data->Continent;
$population = $data->Population ;
echo "
<div class='postedComment' id=\"$data-
>id \">
<b>Country : </b>$name <br />
<b>Continent : </b>$continent<br/>
<b>Population : </b>$population
<i style=\"font-size:small;color:blue\">Index : $id</i>
<hr />
</div>
" ;
}
/* close connection */
$db->close();
function exception_handler($exception) {
echo "Exception cached : " , $exception->getMessage(), "";
}
很抱歉将样式与 PHP 混合在一起，这是一项正在进行的工作。
这是CSS规则
#postedComments {
width: 100%;
display: block;
}
.postedComment {
width: 33%;
float: left;
min-width: 200px;
min-height: 80px;
}
#loadMoreComments {
display:none;
}
html, body {
height: ;
width: 100%;
margin: 0;
padding: 0;
}
#body {
width: 60%;
margin: 1% auto;
}
/* Resets */
ul {
padding:0;
margin:0 0 20px 0;
list-style:none;
}
h1, h2 {
padding:0;
margin:0 0 20px 0;
font-weight:normal;
}
p {
padding:0;
margin:0 0 20px 0;
}
a:link, a:visited {
text-decoration:underline;
color:#000;
}
a:hover {
text-decoration:none;
}
ul li {
padding:5px 0;
}
ul li input[type="text"], ul li input[type="password"] {
width:200px;
}
这里也是调用脚本的 JavaScript。
(custom_jquery-debug.js)
$(document).ready(function() {
$("#postedComments").append("<p id='last'></p>");
//$("#postedComments").append( "<div id='last'></div>" );
console.log("Document Ready ------------------------");
if ($("#last").length) {
position = $("#last").offset();
console.log("Initialization of last_DIV succeeded and it's values are ....Top-value is :"+
Math.floor(position.top) + " ---- Left-value is : "+
Math.floor(position.left));
}
doMouseWheel = 1;
$(window).scroll(function() {
if (!doMouseWheel) {
return;
}
var distanceTop = $('#last').offset().top - $(window).height();
console.log("Mouse scroll , and The DIV last has an offset-top value of :"+
Math.floor($("#last").offset().top) + "----Window height is :"+
Math.floor($(window).height()) + "---- Last's offset minus window height is :"+
Math.floor(distanceTop));
if ($(window).scrollTop() > distanceTop) {
console.log("End of Window Reached >>>>>>>>>>>>>>>>>>>>>>>>>>");
console.log("Show Div loadMoreComments and Class .postedComments.last has the id of :"+
$(".postedComment:last").attr('id'));
doMouseWheel = 0;
$('div#loadMoreComments').show();
$.ajax({
dataType: "html",
url: "jquery-loadMoreComments.php?lastComment=" + $(".postedComment:last").attr('id'),
success: function(html) {
doMouseWheel = 1;
if (html) {
$("#postedComments").append(html);
console.log("Append html , sumarize .... first id has nr : " +
$(".postedComment:first").attr('id') +
" --- last id has nr :" +
$(".postedComment:last").attr('id'));
position = $("#last").offset();
console.log("New values of last_DIV from IF_html are , Top:"+
Math.floor(position.top) + " --- left :" +
Math.floor(position.left));
$("#last").remove();
if ($("#last").length == 0) {
console.log(">>>>>>>>>>>>>>>The last_DIV is removed from stage>>>>>>>>>>");
}
$("#postedComments").append("<p id='last'></p>");
if ($("#last").length) {
position = $("#last").offset();
console.log(">>>>>>>>>>>>>>>A new last_DIV is appended and it's values are , Top :" +
Math.floor(position.top) + " ---- Left :" +
Math.floor(position.left));
}
$('div#loadMoreComments').hide();
} else {
console.log("LoadMoreComments is replaced with a custom message");
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of countries !!!!!!!</h1></center>");
}
}
});
}
});
});
第二个 JS 脚本 (custom_jquery.js)
$(document).ready(function() {
$("#postedComments").append("<p id='last'></p>");
//console.log("Document Ready");
doMouseWheel = 1;
$(window).scroll(function() {
//console.log("Window Scroll ----");
if (!doMouseWheel) {
return;
};
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop) {
//console.log("Window distanceTop to scrollTop Start");
doMouseWheel = 0;
$('div#loadMoreComments').show();
//console.log("Another window to the end !!!! "+$(".postedComment: last ").attr('id'));
$.ajax({
dataType: "html",
url: "jquery-loadMoreComments.php?lastComment=" +
$(".postedComment : last ").attr('id'),
success: function(html) {
doMouseWheel = 1;
if (html) {
$("#postedComments ").append(html);
//console.log("Append html---------" +$(".postedComment: first ").attr('id'));
//console.log("Append html---------" +$(".postedComment: last ").attr('id'));
$("#last ").remove();
$("#postedComments ").append( " < p id = 'last' > < /p>" );
$('div#loadMoreComments').hide();
}else{
$('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of countries !!!!!!!</h1 > < /center>");
// Added on Ver.0.4
//Disable Ajax when result from PHP-script is empty (no more DB-results )
doMouseWheel = 0;
}
}
});
}
});
});
我应该进行哪些更改才能恢复初始功能？