jQuery函数动态加载更多数据答案

【问题标题】：jQuery Function to dynamically load more datajQuery函数动态加载更多数据
【发布时间】：2017-06-11 05:12:47
【问题描述】：

所以我遵循了一个旧的 youtube 教程，但我无法完全做到。我这边什么都没有加载。基本上，我想做的是在网页上从数据库中发布 3 或 5 个数据，然后当用户向下滚动时，它将加载更多数据（我想制作一个按钮说明（加载更多）然后调用函数加载它）。现在，我的网页是空白的，什么都没有弹出，甚至是错误，什么都没有。徘徊了将近一个小时，改变事物并仔细检查，但无济于事。非常感谢任何帮助:) 这是我的 index.php

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">


    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            //var to auto-increment 
                var flag = 0;

                $.ajax({
                    type: "GET",
                    url: "get_data.php",
                    data:{
                        'offset': 0,
                        'limit': 3
                    },
                    success: function(data){
                        $('body').append(data);
                        flag += 3;
                    }

                });

                $(window).scroll(function(){

                    if($(window).scrollTop() >= $(document).height() - $(window).height()){

                    $.ajax({

                        type: "GET",
                        url: "get_data.php",
                        data:{
                            'offset': flag,
                            'limit': 3
                            },
                        success: function(data){
                        $('body').append(data);
                        flag += 3;
                            }

                    });

                }
        });
    </script>

    <style type="text/css">

        .blog-post{
            border-bottom: solid 4px black;
            margin-bottom: 20px;
        }
        .blog-post h1{
            font-zise: 40px;
        }
        .blog-post p{
            font-size: 30px;
        }
    </style>


 </head>
  <body>

  </body>
</html>

查看“get_data.php”链接：https://pastebin.com/MYz2bjFN jquery.min.js 与 get_data.php 位于同一文件夹中。数据库已存在。

【问题讨论】：

开发者控制台有没有js报错？您是否在错误日志中收到任何 PHP 错误？您是否检查过开发者工具中的网络选项卡以查看是否发出了请求或实际返回了什么？
请将完整（重要）错误消息添加到您的问题中。另外，请将您的 PHP 代码也直接添加到问题中。
哦，伙计，我已经看到了，感谢您的提示.. 我刚刚添加了 });在标签之前。但不确定它有什么意义，因为所有标签都已关闭。我将发表另一条评论。
我用tabs tabs缩进，基本上是错的，你用notepad++上的插件自动缩进吗？现在当我滚动它时它正在工作，它现在加载另一组数据
我不使用记事本++。我正在使用崇高。顺便说一句，既然您自己发现了问题，请创建一个答案并解释您是如何解决它并将其标记为已回答。

标签： php jquery mysql ajax html

【解决方案1】：

发现问题。我使用了 chrome 的开发者工具并检查了网络选项卡，发现没有打印错误的主要原因是因为 $(window).scroll(function(){... 没有结束标记之前。

非常感谢 Magnus Eriksson。

【讨论】：