recherche

Maison >interface Web >js tutoriel >Utilisez jQuery pour charger automatiquement lors du défilement vers le bas

Utilisez jQuery pour charger automatiquement lors du défilement vers le bas

亚连
亚连original
2018-06-05 17:10:151569parcourir

Cet article présente principalement la méthode de jQuery pour charger automatiquement davantage lors du défilement vers le bas, impliquant les compétences de jQuery en matière d'implémentation d'éléments de page fonctionnant de manière dynamique basés sur ajax. Les amis dans le besoin peuvent s'y référer

Cet article décrit les exemples. jQuery implémente une méthode pour charger automatiquement davantage lors du défilement vers le bas. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ici, nous utilisons AJAX pour réaliser la fonction de défilement jusqu'à la fin pour charger les 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>

Ce qui précède est ce que J'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

À propos du problème d'extraction des fichiers de configuration liés au projet lorsque vue-cli est packagé (tutoriel détaillé)

Création de composants de pile coulissante à l'aide de vue (tutoriel détaillé)

À propos de l'utilisation de fetch pour télécharger des images dans React Native (tutoriel détaillé)

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：Comment implémenter le même composant de question d'entretien en utilisant Angular, React et VueArticle suivant：Comment implémenter le même composant de question d'entretien en utilisant Angular, React et Vue

Articles Liés

Voir plus