recherche

Maison >interface Web >js tutoriel >jQuery implémente le chargement automatique de davantage de partage de code lors du défilement vers le bas

jQuery implémente le chargement automatique de davantage de partage de code lors du défilement vers le bas

小云云
小云云original
2018-02-23 09:54:272044parcourir

Cet article présente principalement la méthode de chargement automatique de jQuery lors du défilement vers le bas. Cela implique les compétences de jQuery en matière de mise en œuvre d'éléments de page fonctionnant de manière dynamique basés sur ajax. J'espère que cela pourra aider tout le monde.

AJAX est utilisé ici pour réaliser le défilement jusqu'à la fin de la fonction de chargement des données : 


<!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>

Recommandations associées :

Chargement automatique jQuery Plus de programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Angular implémente le partage de code de la fonction de barre de progressionArticle suivant：Angular implémente le partage de code de la fonction de barre de progression

Articles Liés

Voir plus