javascript - 使用 $.post 加载数据

Question

我目前正在编写自己的博客类型网站，只是为了好玩。 在这个项目开始时我不知道任何 php/mysql/javascript，但我学到了很多东西，到目前为止，编写代码的过程或多或少是流畅的，但是，我终于发现自己被卡住了，网站主要部分的内容加载问题，我想这比我一直在做的事情要复杂一些......

我想使用触发方式按日期顺序显示更多帖子，我找到了一个名为 Jscroll 的 Jquery 插件；到目前为止，它按照它说的去做，但我不知道如何将它与其他一些方法一起使用，以便它在每次点击某个链接时加载新内容。

我想这可以通过应用 AJAX 技术来实现，我一直在查看 Jquery 的 $.post() 函数的文档，据我所知，它能够将数据发送到目标文件这样您就可以使用 $_POST 检索该数据，例如。

这是我的 Jscroll 插件代码，其中包含参数说明...

$('#postwrap').jscroll({
    autoTrigger: false, //False makes the content load only by a trigger (a link)
    loadingHtml: "<div><img src=/img/loading.gif><small> Loading...</small></div>",
    callback: Test, //Loads a function after the content is loaded (it doesn't actually work if I write it with the (), like Test()
});

还有...这是上面代码中回调设置引用的Test函数

  function Test(){
   $.post( "loadArticle.php", { test1: "a", test2: "b" } );
  }

因此，在“loadArticle.php”中，我试图通过 $_POST['test'] 检索 $.post 发送的值，但是在触发器加载下一组内容之后，我对发送变量，我得到 NULL 值。我知道我没有“发送”任何有值(value)的东西，但如果我真的设法得到了一些东西，那么我会继续我想出的任何事情，以有序的方式实际检索数据库帖子。

我不知道这是否可以通过这种方式完成，如果 $.post() 甚至应该按照我的想法去做，如果我误解了什么，以及是否有任何其他方式...... 非常感谢您的帮助，谢谢。

Answer 1

每次调用 AJAX 函数时计算容器 div 中加载的元素。做这样的事情。

var loader = {};

    loader.content = function(element){
        var contentCount = $(element).children().length;
        $.ajax({
            url: 'http://yoursite.com/loadcontent.php',
            dataType: "json",
            type: "post",
            data:{
                offset:contentCount
            }
            success:function(data){
                var htmlString = '<div class="samplechild"><h4>'+data.title+'</h4><p>'+data.post+'</p></div>';
                $(element).append(htmlString);
            }
        });
    }

    $('#postwrap').jscroll({
        autoTrigger: false, //False makes the content load only by a trigger (a link)
        loadingHtml: "<div><img src=/img/loading.gif><small> Loading...</small></div>",
        callback: loader.content('.container'), //Loads a function after the content is loaded (it doesn't actually work if I write it with the (), like Test()
    });

无限滚动的另一种选择

var loader = {};

    loader.content = function(element){
        var contentCount = $(element).children().length;
        $.ajax({
            url: 'http://yoursite.com/loadcontent.php',
            dataType: "json",
            type: "post",
            data:{
                offset:contentCount
            }
            success:function(data){
                var htmlString = '<div class="samplechild"><h4>'+data.title+'</h4><p>'+data.post+'</p></div>';
                $(element).append(htmlString);
                $(element).animate({ scrollTop: $(document).height() }, 1000);
            }
        });
    }

    $(document).on('click','.button-link',function(event){
        event.preventDefault();
        loader.content('.containerDiv');
    });