使用$ .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发送的值，但是在触发器加载下一组内容后，我执行了变量发送的var_dump，我得到NULL值。 我知道我“发送”没什么值得的，但如果我真的设法得到了什么，那么我将采取任何我想出的方式来实际有序地检索数据库帖子。

我不知道这是否可以通过这种方式完成，如果$ .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');
    });