php - ajax代码中几个语句的解释

Question

我正在通过 udemy 做一个社交媒体项目。讲师已经为无限滚动完成了 ajax。ajax 部分。我在某些方面对此表示怀疑。NOTE-posts_area 是一个空的 div，我们将在其中加载帖子

$(window).scroll(function() 的解释？？？

$(document).ready(function() {  

    $('#loading').show();

    //Original ajax request for loading first posts 
    //$.ajax is a jquery to perform ajax request
    $.ajax({
        url: "includes/handlers/ajax_load_posts.php",
        type: "POST",
        data: "page=1&userLoggedIn=" + userLoggedIn, //what does this mean ???
        cache:false,

        success: function(data) {
            $('#loading').hide();
            $('.posts_area').html(data);//post area is a empty div created to enter the posts 
        }
    });
    $(window).scroll(function() {
        var height = $('.posts_area').height(); 
        var scroll_top = $(this).scrollTop();
        var page = $('.posts_area').find('.nextPage').val();
        var noMorePosts = $('.posts_area').find('.noMorePosts').val();

        if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {  //if noMorePost is true this wont execute aka there are posts to be loaded
            $('#loading').show();  //show loading gif while more posts are loaded

            var ajaxReq = $.ajax({
                url: "includes/handlers/ajax_load_posts.php",
                type: "POST",
                data: "page=" + page + "&userLoggedIn=" + userLoggedIn, //whatever page we are set to
                cache:false,

                success: function(response) {
                    $('.posts_area').find('.nextPage').remove(); //Removes current .nextpage 
                    $('.posts_area').find('.noMorePosts').remove(); //Removes current .nomoreposts 

                    $('#loading').hide();
                    $('.posts_area').append(response);
                }
            });

        } //End if 

        return false;

    }); //End (window).scroll(function())


});

ajax文件

<?php 

include("../../config/config.php"); //has mysql connection variable
include("../classes/User.php");
include("../classes/Post.php");

$limit=10; //no of posts to be loaded per call(we dont want everthing to load at the same time)
$posts=new Post($con, $_REQUEST['userLoggedIn']); 
$posts->loadPostsFriends($_REQUEST,$limit);



?>

以下语句是做什么的？

data: "page=1&userLoggedIn=" + userLoggedIn   

$('.posts_area').html(data);

标签： phpajax

Answer 1

添加到代码中的注释有望解释每个步骤。

$(window).scroll(function() {
    //get the height of the area that you are wanting to use infinite scroll on (doesn't appear to be used.....)
    var height = $('.posts_area').height();  
    //see how far down you have scrolled (doesn't appear to be used.....)
    var scroll_top = $(this).scrollTop(); 
    //look for an element with class 'nextPage' and get it's value (weird way of doing it - would guess the value is a URL
    var page = $('.posts_area').find('.nextPage').val(); 
    //see if class noMorePosts exsits in posts_area -> will return false if it does not.
    var noMorePosts = $('.posts_area').find('.noMorePosts').val();

    //the function we are in is called every time the user scrolls the page.
    //this part looks to see if you have scrolled to the bottom of the page (is the total scroll height equal to the amount you have scrolled plus the height of the page) -> if it is (and the 'noMorePosts' class is not found, run the function.
    //As a side note the methods used in this example are terrible and prone to lots of errors and problems so just be careful that you don't try and use them in a live website.
    if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {  //if noMorePost is true this wont execute aka there are posts to be loaded
        $('#loading').show();  //show loading gif while more posts are loaded
        //make ajax call
        var ajaxReq = $.ajax({
            //url to call
            url: "includes/handlers/ajax_load_posts.php",
            //type of request 
            type: "POST",
            //as this is a POST request you will send some data -> this is that data, you are sending the page (value defined above) and the userLoggedIn variable (which must be defined elsewhere)
            data: "page=" + page + "&userLoggedIn=" + userLoggedIn, //whatever page we are set to
            //do not cache the response (so if you ask for the same info the server still processes the request)
            cache:false,
            //think you should get the rest  
            success: function(response) {
                $('.posts_area').find('.nextPage').remove(); //Removes current .nextpage 
                $('.posts_area').find('.noMorePosts').remove(); //Removes current .nomoreposts 

                $('#loading').hide();
                $('.posts_area').append(response);
            }
        });

    } //End if 

    return false;

}); //End 
//calling the scroll function on page load? Also this seems an odd way of doing it but who am I to judge :-P
(window).scroll(function())