使用$ .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');
    });