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

并且......这里是上面代码中回调设置引用的测试功能

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

所以，在＆＃34; loadArticle.php＆＃34;中，我试图通过$ _POST [＆＃39; test＆＃39;]检索$ .post发送的值，但是在触发器加载下一个之后一组内容，我做了一个var_dump发送的变量，我得到NULL值。我知道我＆＃34;发送＆＃34;没有什么是值得的，但如果我真的设法得到了什么，那么我将采取任何我想出的方式来实际有序地检索数据库帖子。

我不知道这是否可以这样做，如果$ .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');
    });

使用$ .post加载数据

1 个答案: