使用Ajax轻松实现无限滚动jQuery

Question

我正在尝试做一个非常简单的无限滚动，只要滚动位于底部，便会检入.html文件，然后加载另一个.html文件（更多文本）的内容。

第二个HTML文件（当您滚动到“限制”并进行“无限滚动”时将加载的文件）是该文件“ Ej7.1.html”：

<html>
    <body>
        <p> lorem ipsum etc etc etc </p>
    </body>
</html>

<p> lorem ipsum带有更多的文本，但是为了使它在这里读起来更短，我将其删除。

我尝试为其实现jQuery版本的第一个HTML文件是：

<!DOCTYPE html>
<html>
    <head>
        <script> src= "https://code.jquery.com/jquery-3.3.1.min.js" </script>
    </head>

    <script>
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() –    $(window).height()) {
            // Here goes the Ajax
                 $("body").load("Ej7.1");
            }
        });
    </script>

    <body>
        <h1> Pagina ej 7</h1>

        <p> lorem ipsum and a lot of text </p>
    </body>
</html>

因此，该错误使我打开html并按F12键是– $(window).height()) {中的语法错误，这是unexpected identifier错误。

我认为我遇到语法错误，但是似乎找不到我遗漏的地方或做错了。

Answer 1

您的脚本标签格式错误。 将src属性放入标签本身：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Answer 2

您使用了错误的减号。

您正在使用– （字符代码：8211）。 您应该使用- （字符代码：45）。 您的键盘可能有问题，或者您从某些非正确格式的源复制粘贴了它。

另外，您的jQuery包含标签将无法使用@agmcleod发现的功能。

该行基本上是这样做的：

<script>
    src= "https://code.jquery.com/jquery-3.3.1.min.js"
</script>

如果您在页面上使用console.log(src) ，则会看到以下内容：

"https://code.jquery.com/jquery-3.3.1.min.js" 。

使用Ajax轻松实现无限滚动jQuery

问题描述

2 个解决方案

解决方案1
4 2018-03-23 12:24:59

解决方案2
1 已采纳 2018-03-23 12:29:02

使用Ajax轻松实现无限滚动jQuery

问题描述

2 个解决方案

解决方案1 4 2018-03-23 12:24:59

解决方案2 1 已采纳 2018-03-23 12:29:02

解决方案1
4 2018-03-23 12:24:59

解决方案2
1 已采纳 2018-03-23 12:29:02