Javascript 使用$.post加载数据

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

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

我想这可以通过应用AJAX技术来实现，我一直在看Jquery中有关$.post（）函数的文档，据我所知，Jquery可以将数据发送到目标文件，这样您就可以使用$\u 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()
});

因此，在“loadArticle.php”中，我试图通过$_post['test']检索$.post发送的值，但在触发器加载下一组内容后，我对发送的变量进行var_转储，得到空值。我知道我没有“发送”任何有价值的东西，但如果我真的设法得到了一些东西，那么我将以一种有序的方式来实际检索数据库帖子

我不知道是否可以这样做，$.post（）是否应该做我认为它可以做的事情，是否我误解了什么，是否还有其他方法。。。

---

非常感谢您的帮助，谢谢。

每次调用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=函数（元素）{
var contentCount=$（元素）.children（）.length；
$.ajax({
网址：'http://yoursite.com/loadcontent.php',
数据类型：“json”，
类型：“post”，
数据：{
偏移量：contentCount
}
成功：功能（数据）{
var htmlString=''+data.title+''+data.post+'
'；
$（元素）.append（htmlString）；
}
});
}
$（'#postwrap'）.jscroll({
autoTrigger:false，//false仅通过触发器（链接）加载内容
loadingHtml：“正在加载…”，
callback:loader.content（'.container'），//在加载内容后加载一个函数（如果我用（）编写它，它实际上不起作用，比如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');
    });

var-loader={}；
loader.content=函数（元素）{
var contentCount=$（元素）.children（）.length；
$.ajax({
网址：'http://yoursite.com/loadcontent.php',
数据类型：“json”，
类型：“post”，
数据：{
偏移量：contentCount
}
成功：功能（数据）{
var htmlString=''+data.title+''+data.post+'
'；
$（元素）.append（htmlString）；
$（元素）.animate（{scrollTop:$（document）.height（）}，1000）；
}
});
}
$（文档）。在（'单击'，'按钮链接'）上，函数（事件）{
event.preventDefault（）；
装入器内容（'.containerDiv'）；
});

发送post请求后，能否打开浏览器开发工具的“网络”选项卡并查看响应标题？我不知道，这太棒了。我找到了。每当我按下触发器时，我都能看到GET请求和post请求，post请求确实有声明的参数（在本例中为test1和test2）…我认为可能会得到NULL值，因为POST请求是在loadarticle.php加载之后发送的，因此它没有机会检索数据并显示它？但是在这种情况下…数据不是会在第二次加载时存储，然后它不应该显示NULL吗？（但它确实如此）尝试将echo$\u POST['test1']；在loadarticle.php文件中，然后查看网络选项卡中的响应选项卡。它应该输出一些内容。不过，它在响应选项卡中输出一些内容，只是它没有显示……我想知道的是，您是如何打印这些

null

值的？因为请求是异步的，并且没有回显。仅供参考，每个请求是单独处理的，对其他请求没有任何了解。我尝试了这个，但有些东西对我不起作用…我将.container替换为.post，它是包含每篇文章的div的名称…可能是Jscroll插件的问题？除了Jscroll，您还可以自定义自己的无限滚动fn请ee我的帖子的更新谢谢！这很有效…我必须承认我没有完全理解代码，这就是为什么我花了一些时间来测试它，但它有效（这只是一个触发的“显示更多”）。我当然会根据我的特殊情况对其进行一些修改。不过，我只是做一些说明：我认为您在关闭$.ajax（）调用时缺少了一个

；

，我将代码的最后一部分替换为：

$（document）。on（）；

for

$（'#link'）。单击（）；

…我认为这是等效的。再次感谢您。

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