Question

我尝试过使用php和jquery来尝试建立一种方法，让我可以使这段代码工作......我想到的是，每当用户点击加载更多按钮时，它将进入数据库并加载每次点击时接下来的十个数据，直到没有更多数据要添加，在这种情况下，消息替换输入按钮，说“没有找到更多的帖子”。此外，页面本身不会刷新，而是保留在原位以加载其余数据。

的header.php

<?php
include('connection.php');
?>
<?php       
session_start();
// Checks if user is logged in, if not redirect them
if($_SESSION['username'] == ""){
header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Men's Volleyball</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content="To give male volleyball players hope, to ensure they aren't left out" />
<meta name="keywords" content="volleyball, men, sports, sport, scholarships, opportunity" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="load-more.js" type="text/javascript"></script>
<script type="text/javascript">
/*function yHandler(){
var wrap = document.getElementById('left-content');
var contentHeight = wrap.offsetHeight; // Gets page contents
var yoffset = window.pageYOffset; // Get vertical scroll position
var y = yoffset + window.innerHeight;
if(y >= contentHeight){
wrap.innerHTML += '<li class="newData" style="background: #09F; margin: 10px 0px;">New</li>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}

window.onscroll = yHandler;*/
</script>
</head>
<body>
<div class="wrapper">
<div class="header" style="<?php echo $display_header;?>">
<ul class="nav-bar">
<a href="profile.php"><li>Profile</li></a>
<a href="gallery.php"><li>Gallery</li></a>
<a href="message.php"><li>Messages</li></a>
<a href="college.php"><li>Colleges</li></a>
<a href="coach.php"><li>Coaches</li></a>
<div class="right-nav">
<a href="logout.php"><li>Logout</li></a>
</div>
</ul>
</div>

正如您所看到的，我已经注释掉了我尝试使用的代码。

show_post.php

<?php
$eachPosts = $con->query("SELECT * FROM `posts` ORDER BY `id` DESC");

while($result = mysqli_fetch_assoc($eachPosts)){
// if video is empty then echo this line
if(($result["video"] == "") || ($result["video"] != "")){
$account_assoc = $result["account_assoc"];

$result2 = mysqli_fetch_assoc($con->query("SELECT * FROM `Accounts` WHERE username='$account_assoc' OR email='$account_assoc'"));

if($result2["username"] == ""){
$identifier = $result2["firstname"];
}else{
$identifier = $result2["username"];
}

if($result2['image'] == ""){
$image = "http://jnvbaghmara.nic.in/images/staff/Blank.png";
}else{
$image = 'data:image/jpeg;base64,'.base64_encode($result2['image']);
}

//change name of echoed dislike variable if greater than one
if($result['dislikes'] > 1){
$dislike = "<label style='color: red;'>".format_num($result['dislikes'])."</label> Dislikes";
}else{
$dislike = "<label style='color: red;'>".format_num($result['dislikes'])."</label> Dislike";
}

//change name of echoed like variable if greater than one
if($result['likes'] > 1){
$like = "<label style='color: #0096f3;'>".format_num($result['likes'])."</label> likes";
}else{
$like = "<label style='color: #0096f3;'>".format_num($result['likes'])."</label> like";
}

echo '<li id="postItems">
<h4><img src="'.$image.'"/> <label>'.$identifier.'</label></h4>
<div class="all-content">
';
//if video is present echo it here
if($result["video"] != ""){
echo '<iframe width="90%" height="90%" src="https://www.youtube.com/embed/'.$result["video"].'" frameborder="0" allowfullscreen></iframe><br />';
}
//else echo specific line of clone
else{
echo '<p style="color: #555; font-size: 12px;">No Video Available!</p>';
}
echo '
<label style="color: #777;"> '.$like.' </label><label style="color: #777;"> | '.$dislike.'</label><label style="color: #777;"> | 2 comment</label>
<p>'.$result["text"].'</p>
</div></li>';


}
}

echo '<li>
<div class="all-content">
<form method="post">
<input type="submit" name="load" value="Load More" class="load_more_button"/>
</form>
</div>
</li>';
?>

这是我调用数据并回显出html代码的地方

如果有任何代码只是编写一个代码，帮助我什么我使用什么，该表被称为帖子，请尽快回复。

Answer 1

为了在不重新加载页面的情况下加载更多数据，您需要页面能够在Javascript中发出异步HTTP请求，即您需要学习如何进行Ajax调用。除了添加一些JS来进行Ajax调用之外，您还需要创建一个额外的PHP文件来接收Ajax请求，进行数据库查询以及回显所需的数据。您很可能希望该脚本返回JSON格式的数据。

我看到你的'＃34;加载更多＆＃34;按钮在表单内。如果您实际上要提交表单以便向当前页面发出POST请求，那么您的解决方案实际上将重新加载页面。当HTML表单发出HTTP请求时，这些请求不是＆＃34;异步＆＃34;。你可能会让这个方法适合你的目的，但它将是一个脆弱的解决方案。

所以，

了解如何进行Ajax调用。
了解如何获取PHP文件以输出已从数据库中提取的JSON格式数据
将您的学习应用到此项目中！

您需要解决的一些事情：

你的JS如何跟踪它已经取得的结果，即接下来需要获取哪些结果？
您将如何将这些变量（即表示要获取哪些结果的变量）传递给新的PHP脚本？
您的新PHP脚本将如何与您的JS进行通信，以便无法获取更多结果？

如果您需要社区提供更多帮助，请考虑尝试我的建议（即尝试学习如何进行Ajax调用并制作返回JSON格式数据的PHP脚本），然后在遇到特定问题时再询问更多问题道路颠簸。

在这样的情况下，如何使加载更多按钮工作？

的header.php

show_post.php

1 个答案: