当滚动到底部并更新到输入表单时，如何将值加1

在每次AJAX调用之前必须增加页码：

在之前

if(($(window).scrollTop() + $(window).height() == $(document).height())) {
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#fid').serialize(),
        success: function(data) {
            $('#demoajax').append(data);
        }
    });
    return false;
}

在之后

if(($(window).scrollTop() + $(window).height() == $(document).height())) {
    var currentPage = parseInt($('#page_number').val(), 10);
    currentPage = currentPage + 1;
    $('#page_number').val(currentPage);
    $.ajax({
        url: 'test.php',
        type: 'POST',
        data: $('#fid').serialize(),
        success: function(data) {
            $('#demoajax').append(data);
        }
    });
    return false;
}

除此之外，您的代码还有一些问题，可能会写如下：

<!-- Edit 1: HTML comes first, script come later -->
<!-- Edit 2: use real values in HTML attributes instead of JS code -->
<form method="post" id="fid" action="test.php" >
    <input type="hidden" id="page_number" name="page" value="1"/>
</form>
<!-- Edit 3: you had unclosed div tag -->
<div id="demoajax"></div>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
// Edit 4: here, you can use only one script tag for all of your JS code
// Edit 5: declare functions first, use them later
// (you had the code $("#fid").submit(f1()); too early in the page)
function f1() {
    $('#demoajax').hide();
    var $form = $('#fid');
    $.ajax({
        // Edit 6: retrieve url and type parameter from the HTML form
        // this avoid hard-coded values
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(),
        success: function(data) {
            // Edit 7: use method chaining where you can
            $('#demoajax').show().html(data);
        }
    });
    // Edit 8: don't return false within event handler
}
// Edit 9: avoid premature call invocation problem
$("#fid").submit(f1);
// on load page call function code //
// Edit 10: avoid premature call invocation problem
$(document).ready(f1);
$(document).ready(function() {
    $(window).scroll(function() {
        // Edit 11: store and reuse jQuery variables
        var $window = $(window);
        var $demoajax = $('#demoajax');
        // Edit 12: remove unused variables scroll_top and height
        // Edit 13: use triple equal sign "===" instead of double equal "=="
        if(($window.scrollTop()+$window.height() === $(document).height())) {
            //$('#demoajax').hide();
            //$('#protect_form_between_ajax_process').show();
            //$('#loading').show();
            // ==============================
            // Edit 14: increment the counter
            var currentPage = parseInt($('#page_number').val(), 10);
            currentPage = currentPage + 1;
            $('#page_number').val(currentPage);
            // ==============================
            var $form = $('#fid');
            $.ajax({
                // Edit 15: same as above, avoid hard-coded values
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: $form.serialize(),
                success: function(data) {
                    $demoajax.append(data);
                }
            });
            // Edit 16: remove unnecessary return statement here
        }
        // Edit 17: don't return false within event handler
    });
});
</script>

然而，就我个人而言，我会使用模块模式来编写它，比如这样：

var infiniteScrollLoader = function($container, $form, initialPageNumber) {
    var $window = $(window);
    var $document = $(document);
    var pageNumber = initialPageNumber;
    // this function crawls the content of the next page
    function requestNextPageContent() {
        var request = $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: pageNumber
        });
        // when a request is made, increment page number automatically
        // avoid spaghetti code, use promise/deferred pattern
        request.then(incrementPageNumber);
        return request;
    }
    // use simple dedicated functions
    function incrementPageNumber() {
        pageNumber = pageNumber + 1;
    }
    function showContainer() {
        $container.show();
    }
    function appendNextPageContent(data) {
        $container.append(data);
    }
    function showNextPage() {
        requestNextPageContent().then(appendNextPageContent);
    }
    function setPageNumber(pageNumber) {
        pageNumber = pageNumber;
    }
    function onScroll() {
        if(($window.scrollTop() + $window.height() === $document.height())) {
            showNextPage();
        }
    }
    function init() {
        $window.scroll(onScroll);
        $container.hide();
        // do initial request
        // this line should be self-explained and can be read as "text":
        // request the content of the next page, then show the container
        // then append the page content into the current page
        requestNextPageContent()
            .then(showContainer)
            .then(appendNextPageContent);
    }
    return {
        init: init,
        showNextPage: showNextPage,
        setPageNumber: setPageNumber
    };
};
// init and don't do anything else
infiniteScrollLoader.init( $('#demoajax'), $('#fid'), 1 );
// or use it programatically
infiniteScrollLoader.showNextPage(); // show page 2
infiniteScrollLoader.showNextPage(); // show page 3
infiniteScrollLoader.setPageNumber(6);
infiniteScrollLoader.showNextPage(); // show page 6