在这种情况下,我如何使load more按钮工作


How would I make load more button work in a case like this?

我尝试使用php和jquery尝试建立一种方式,我可以使这段代码工作…我设想的是,每当用户点击load more按钮时,它就会进入数据库,并在每次点击时加载下一个10个数据,直到没有更多的数据要添加,在这种情况下,一条消息取代输入按钮,说"没有更多的帖子被发现"。此外,页面本身不会刷新,而是留在原地加载其余数据。

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代码的地方

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

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

我看到你的"load more"按钮在一个表单内。如果您实际上要提交表单以便向当前页面发出POST请求,那么您的解决方案实际上是重新加载页面。当HTML表单发出HTTP请求时,这些请求不是"异步的"。您可能会使这种方法为您的目的工作,但它将是一个脆弱的解决方案。

  • 学习如何进行Ajax调用。
  • 学习如何获得一个PHP文件来输出json格式的数据,这些数据是从数据库中获取的
  • 将你的学习应用到这个项目中!

一些你需要解决的问题:

  • 你的JS如何跟踪它已经获取的结果,即下一步需要获取的结果?
  • 你将如何传递这些变量(即那些表示哪些结果来获取)到你的新PHP脚本?
  • 你的新PHP脚本如何与你的JS沟通,没有更多的结果被获取?

如果您需要社区的更多帮助,请考虑尝试我的建议(例如,尝试学习如何进行Ajax调用和编写返回json格式数据的PHP脚本),然后在遇到问题时询问更多关于特定问题的问题。