jQuery implements automatic loading of more code sharing when scrolling to the bottom-JS Tutorial-php.cn

jQuery implements automatic loading of more code sharing when scrolling to the bottom

小云云

Release： 2018-02-23 09:54:27

Original

2048 people have browsed it

This article mainly introduces jQuery's method of automatically loading more when scrolling to the bottom, involving jQuery's implementation skills of dynamically operating page elements based on ajax. Friends who need it can refer to it. I hope it can help everyone.

AJAX is used here to realize the function of scrolling to the end to load data:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      AddSth();
    });
    $(function () {
      $(".main").unbind("scroll").bind("scroll", function (e) {
        var sum = this.scrollHeight;
        if (sum <= $(this).scrollTop() + $(this).height()) {
          AddSth();
        }
      });
    });
    function AddSth() {
      $.ajax({
        type: &#39;POST&#39;,
        url: "index.aspx/ReturnSth",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        //data: "",
        success: function (data) {
          json = $.parseJSON(data.d);
          for (var i in json) {
            var tbBody = "<ul><li>" + json[i].sth + "</li></ul>";
            $(".main").append(tbBody);
          }
          $(".main").append("<hr />");
        }
      });
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <p>下拉加载更多</p><br />
    <p class="main" style="border: 1px solid red; height: 700px; overflow: auto;"></p>
  </form>
</body>
</html>

Copy after login

Related recommendations:

jQuery automatically loads more program

The above is the detailed content of jQuery implements automatic loading of more code sharing when scrolling to the bottom. For more information, please follow other related articles on the PHP Chinese website!