连续滚动。 AJAX,PHP,JAVASCRIPT,MYSQLPHP、AJAX、MYSQL、JAVASCRIPT

2023-09-10 18:27:35 作者:迷倒众生ぢ

我其实是建立一个论坛。因此,将有一个ORDER BY下拉框,即一个HTML选择标记。当用户选择喜欢的时候还是喜欢,等任何命令一个AJAX调用函数时动态地使内容到页面从MySQL数据库。

选择菜单

 <选择名称=排序依据的onchange =showposts(THIS.VALUE)>
<期权价值=1选择>通过时间和LT; /选项>
<期权价值=2>通过正版计数和LT; /选项>
<期权价值=3>来源可疑计数和LT; /选项>
< /选择>
 

showposts功能

 函数showposts(STR){

        排序依据=海峡;

        如果(window.XMLHtt prequest){
            // $ C $下IE7 +,火狐,Chrome,歌剧,Safari浏览器
            XMLHTTP =新XMLHtt prequest();
        }其他{// code对IE6,IE5
            XMLHTTP =新的ActiveXObject(Microsoft.XMLHTTP);
        }
        xmlhttp.onreadystatechange =功能(){
            如果(xmlhttp.readyState == 4和&安培; xmlhttp.status == 200){
                的document.getElementById(postsdiv)的innerHTML = xmlhttp.responseText。
            }
        }
        xmlhttp.open(GET,?showposts.php Q =+ STR,真正的);
        xmlhttp.send();
}
 
六星教育 如何学习PHP最有效 拥有哪些技能可直接被企业录用

Showposts.php页

  $ SQL =SELECT * FROM职位按日期倒序;
$结果= $连接 - >查询($ SQL);
$用户名= $ _ SESSION ['用户名'];

而($行= $ result-> FETCH_ASSOC()){
    回声<跨度ID ='postspan$行['身份证']NAME ='postspan$行['身份证']。'>中;
    回声<跨度ID ='editspan$行['身份证']NAME ='editspan$行['身份证']。'>中;
    回声-----------------------------------< / BR>中;
    回声-----------------------------------< / BR>中;

    回声发布者:。$行['用户']&放大器; NBSP&安培; NBSP&安培; NBSP&安培; NBSP;
    回声时间:。$行['日']< / BR>中;
    回声<跨度ID = genuinecount$行['身份证']>正版计数:。$行['真正的']。
    回声<跨度ID = dubiouscount$行['身份证']>可疑计数:。$行['可疑']< / SPAN>中;
    回声< / BR> ------------------------< / BR>中;
    回声主题:。$行['主题']< / BR>中;

    回声邮报。$行['后']'< BR />';
 

}

问题     因此,这里的问题是,我想用像被用在Facebook上的一个连续的滚动选项。所有的JavaScript和jQuery库,我看到使用的逻辑,当用户向下滚动到页面中,JavaScript之后然后把一些内容。但是,在这里我运行一个while循环而同时带来的从数据库中的数据。所以,我无法实现的JavaScript code。那么,有没有我可以做,以实现连续滚动的任何事情一样,是否有可能打破while循环,或部分或类似的东西取回全部数据和显示部分?

JavaScript的滚动

 函数yhandler(){
    变种缠绕=的document.getElementById('postsdiv');
    VAR或contentHeight = wrap.offsetHeight;
    VAR yoffset = window.pageYOffset;
    变种Y = yoffset + window.innerHeight;
    如果(Y> =或contentHeight){
        showposts();
}
}
window.onscroll = yhandler();
 

解决方案

您应该考虑MySQL的限制。该限制功能需要2个输入变量,开始和长度。有了这两个变量,你可以创建一个寻呼系统;这将大大的线中的内容:

showposts功能

  //添加一个全局变量来保存当前页面:
VAR当前页= 0;
变种currentType = 0;

功能showposts(STR){
    //所有preVIOUS code,持平

    xmlhttp.onreadystatechange =功能(){
        如果(xmlhttp.readyState == 4和&安培; xmlhttp.status == 200){
            的document.getElementById(postsdiv)的innerHTML + = xmlhttp.responseText。
        }
    }

    如果(STR!=未定义){
        currentType =海峡; //保存当前的类型以供日后使用
        。的document.getElementById(postsdiv)的innerHTML =;
    }

    xmlhttp.open(GET,+ currentType +showposts.php Q =?&安培; P =+当前页,真正的);
    xmlhttp.send();
}
 

Showposts.php页

 < PHP
$当前页= INTVAL($ _ GET ['P']);
$ numPerPage = 30; //更改为项目的数量,你希望每个页面

$ SQL =SELECT * FROM职位按日期倒序LIMIT($当前页* $ numPerPage),$ numPerPage。;
$结果= $连接 - >查询($ SQL);
$用户名= $ _ SESSION ['用户名'];

而($行= $ result-> FETCH_ASSOC()){
    回声<跨度ID ='postspan$行['身份证']NAME ='postspan$行['身份证']。'>中;
    回声<跨度ID ='editspan$行['身份证']NAME ='editspan$行['身份证']。'>中;
    回声-----------------------------------< / BR>中;
    回声-----------------------------------< / BR>中;

    回声发布者:。$行['用户']&放大器; NBSP&安培; NBSP&安培; NBSP&安培; NBSP;
    回声时间:。$行['日']< / BR>中;
    回声<跨度ID = genuinecount$行['身份证']>正版计数:。$行['真正的']< / SPAN>中;
    回声<跨度ID = dubiouscount$行['身份证']>可疑计数:。$行['可疑']< / SPAN>中;
    回声< / BR> ------------------------< / BR>中;
    回声主题:。$行['主题']< / BR>中;

    回声邮报。$行['后']'< BR />';
}
?>
 

现在你需要检测当用户滚动到页面底部,然后调用下面的函数:

 函数下一页(){
    当前是++;

    showposts();
}
 

I am actually creating a forum. So, there would be a "order by" dropdown box i.e a select tag in html. Where the user selects any order like by time or like, etc. An ajax function is called which dynamically brings content into the page from mysql database.

Select menu

<select name="orderby" onchange="showposts(this.value)">
<option value="1" selected>By Time</option>
<option value="2">By Genuine Count</option>
<option value="3">By Dubious Count</option>
</select>

showposts function

function showposts(str){

        orderby=str;

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("postsdiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","showposts.php?q="+str,true);
        xmlhttp.send();
}

Showposts.php page

$sql = "SELECT * FROM posts order by date desc ";
$result = $connection->query($sql);
$username=$_SESSION['username'];

while($row = $result->fetch_assoc()) {
    echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >";
    echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >";
    echo "-----------------------------------</br>";
    echo "-----------------------------------</br>";

    echo "Posted By: ".$row['user']."&nbsp&nbsp&nbsp&nbsp";
    echo "Time: ".$row['date']."</br>";
    echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine'].";        
    echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>";
    echo "</br>------------------------ </br>";
    echo "Subject: ".$row['subject']."</br>";

    echo "Post: ".$row['post'].'<br />';

}

Problem So, the problem here is, I want to use a continuous scroll option like the one which is used in facebook. All the javascripts and jquery libraries I saw use logic that when the user scrolls down to the page, the javascript then places some content after that. But, here I running a while loop which brings the data from database at a time. So, I couldn't implement the javascript code. So, is there any thing that I could do to achieve continuous scroll, like is there any possibility to break the while loop or retrieving entire data and display part by part or anything like that?

javascript for scrolling

function yhandler(){
    var wrap=document.getElementById('postsdiv');
    var contentheight=wrap.offsetHeight;
    var yoffset=window.pageYOffset;
    var y=yoffset+window.innerHeight;
    if(y>=contentheight){
        showposts();
}
}
window.onscroll=yhandler();

解决方案

You should look into MySQL LIMIT. The limit function takes 2 input variables, start and length. With these 2 variables you can create a paging system; that would go something among the lines of:

showposts function

//Add a global variable to save the current page:
var currentPage = 0;
var currentType = 0;

function showposts(str){
    //ALL PREVIOUS CODE, UNCHANGED

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("postsdiv").innerHTML+=xmlhttp.responseText;
        }
    }

    if(str != undefined){
        currentType = str; //save the current type for later use
        document.getElementById("postsdiv").innerHTML = "";
    }

    xmlhttp.open("GET","showposts.php?q="+currentType+"&p="+currentPage,true);
    xmlhttp.send();
}

Showposts.php page

<?php
$currentPage = intval($_GET['p']);
$numPerPage = 30; //change this to the number of items you want each page

$sql = "SELECT * FROM posts order by date desc LIMIT ".($currentPage * $numPerPage).", ".$numPerPage;
$result = $connection->query($sql);
$username=$_SESSION['username'];

while($row = $result->fetch_assoc()) {
    echo "<span id='postspan".$row['id']."' name='postspan".$row['id']."' >";
    echo "<span id='editspan".$row['id']."' name='editspan".$row['id']."' >";
    echo "-----------------------------------</br>";
    echo "-----------------------------------</br>";

    echo "Posted By: ".$row['user']."&nbsp&nbsp&nbsp&nbsp";
    echo "Time: ".$row['date']."</br>";
    echo "<span id=genuinecount".$row['id'].">Genuine Count: ".$row['genuine']."</span>";        
    echo "<span id=dubiouscount".$row['id'].">Dubious Count: ".$row['dubious']."</span>";
    echo "</br>------------------------ </br>";
    echo "Subject: ".$row['subject']."</br>";

    echo "Post: ".$row['post'].'<br />';
}
?>

Now you need to detect when a user has scrolled to the bottom of the page, then call the following function:

function nextPage(){
    currentPage++;

    showposts();
}