Maison > Article > interface Web > 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:271982parcourir
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: 'POST',
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!