AJAX功能不正常工作的滚动 [英] AJAX function is not working by scroll

问题描述

使用的 AJAX 无尽的滚动。内容只加载第一次，但简化版，负载由滚动。

什么是错的？

jQuery的：

 函数loadFeed（）{
    $阿贾克斯（{
        网址：loadmore.php，
        数据类型：HTML，
        成功：功能（数据）{
            $（＃上岗）追加（'＆LT; D​​IV CLASS =havanagila＆GT;＆LT; / DIV＆GT;'）;
            $（'＃帖）HTML（数据）。
        }
    }）;
}

loadFeed（）;
$（窗口）.scroll（函数（）{
    变种windowScroll = $（窗口）.scrollTop（）;
    变种WINDOWHEIGHT = $（窗口）.height（）;
    VAR documentHeight = $（文件）.height（）;

    如果（（windowScroll + WINDOWHEIGHT）== documentHeight）{
        loadFeed（）;
    }
}）;
 

loadmore.php：

 ＆LT; PHP
在session_start（）;

如果（使用isset（$ _SESSION ['登录']））{

    $登录名= $ _SESSION ['登录'];
    的$ id = $ _ SESSION ['身份证'];

    $用户名=根;
    $密码=根;
    $主机=localhost的;
    $ DBNAME =Kotik灵感;


    功能testdb_connect（$主机名，用户名$，$密码）{
        $胸径=新PDO（mysql的：主机= $主机名，数据库名= Kotik灵感，$用户名，密码$）
        返回$胸径;
    }


    尝试 {
        $胸径= testdb_connect（$主机名，用户名$，$密码）;

    }赶上（PDOException $ E）{
        回声$ E-＆GT;的getMessage（）;
    }

}

？＆GT;

＆LT; PHP

$ title_select_query = $胸径 - ＆GT; prepare（从书本WHERE ID =选择标题：ID ORDER BY日期DESC）;
$ title_select_query  - ＆GT;执行（阵列（'：身份证'=＆GT;的$ id））;
$ title_select_query_result = $ title_select_query-＆GT; fetchColumn（）;
回声（$ title_select_query_result）;

$ title_select_query_result = $ title_select_query-＆GT; fetchColumn（）;
回声（$ title_select_query_result）;

$ title_select_query_result = $ title_select_query-＆GT; fetchColumn（）;
回声（$ title_select_query_result）;

$ title_select_query_result = $ title_select_query-＆GT; fetchColumn（）;
回声（$ title_select_query_result）;

$ title_select_query_result = $ title_select_query-＆GT; fetchColumn（）;
回声（$ title_select_query_result）;

？＆GT;
 

解决方案

由于您更换$ a的含量（'＃帖），对文件的高度上滚动第一Ajax请求后不会改变=>所以你需要向上滚动，然后向下滚动再次触发另一个Ajax请求。 因为我不知道预期的页面布局，我会给一个简单的基本演示 HTML 的jsfiddle演示

 ＆LT; D​​IV ID =main的风格=高度：200像素;溢出-Y：汽车;＆GT;
    ＆LT; D​​IV ID =上岗＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

的javascript

  VAR loadmoore = TRUE，
    loaded_posts = 0;
功能gent_sample_data（num_posts）{
    变种我，
        SAMPLE_DATA ='';
    对于（i = 0; I＆LT; num_posts;我++）{
        SAMPLE_DATA + =＆其中，P class'post'＆GT; title_select_query_result+（loaded_posts + I）+＆所述; / P＆gt;中;
    }
    返回SAMPLE_DATA;
}

功能loadFeed（）{
     //生成样本数据
    VAR SAMPLE_DATA = gent_sample_data（15）;
    loaded_posts = loaded_posts + 15;
    $阿贾克斯（{
        网址：/回声/ HTML /'，
        数据类型：HTML，
        类型：'后'，
        数据：{HTML：SAMPLE_DATA}，
        成功：函数（returnhtml）{
            执行console.log（returnhtml）;
             //选项1  - 添加结果存入havanagliaDIV
            //变量$后= $（'＆LT; D​​IV CLASS =havanagila＆GT;＆LT; / DIV＆GT;'）;
            // $ post.html（returnhtml）;
            // $（＃上岗）追加（$后）;

            //选择2  - 广告结果后havanagliaDIV
            $（＃上岗）追加（'＆LT; D​​IV CLASS =havanagila＆GT;＆LT; / DIV＆GT;'）;
            $（＃上岗）追加（returnhtml）。
            loadmoore = TRUE;
        }
    }）;
}
loadFeed（）;

$（＃主）。滚动（函数（）{
    如果（。loadmoore＆功放;＆安培; $（主）scrollTop的（）＆GT; =（$（主）高度（） -  100））{
       loadmoore = FALSE;
       loadFeed（）;
    }
}）;
 

有关你的情况，我建议使用这样的：

  VAR loadmoore = TRUE;
功能loadFeed（）{
    $阿贾克斯（{
        网址：loadmore.php，
        数据类型：HTML，
        成功：功能（数据）{
            变量$ havanaglia = $（'＆LT; D​​IV CLASS =havanagila＆GT;＆LT; / DIV＆GT;'）;
            $ havanaglia.html（数据）;
            $（＃上岗）追加（$ havanaglia）。
            loadmoore = TRUE;
        }
    }）;
}

loadFeed（）;

$（窗口）.scroll（函数（）{
    如果（loadmoore＆安培;＆安培; $（窗口）.scrollTop（）＆GT; = $（文件）.height（） -  $（窗口）.height（） -  100）{
        loadmoore = FALSE;
       loadFeed（）;
    }
}）;
 

要prevent来从数据库中同一职位我建议发送到PHP最后加载后的ID /号码来获取与ID /号码>最后加载后的帖子

Using AJAX for endless scroll. Content loads only first time, but does't load by scroll.

What is wrong?

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();
    }
});

loadmore.php:

<?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);

?>

解决方案

Because you replace the content of $('#posts'), the height of document does not change after first ajax request on scroll => so you need to scroll up , and then scroll down again to trigger another ajax request. Because i don't know the expected page layout, i will give a simple basic demo HTML JSFiddle demo

<div id="main" style="height:200px; overflow-y : auto;">
    <div id="posts">
    </div>
</div>

javascript

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();
    }
});

For your case I suggest to use something like this:

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();
    }
});

To prevent to get the same posts from database i recommend to send to php the id/number of last loaded post to get posts with id/number > last loaded post

这篇关于AJAX功能不正常工作的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！