Maison >développement back-end >tutoriel php >Chargement pull-up natif PHP et méthodes d'implémentation supplémentaires en cliquant pour charger (exemples de code)

Chargement pull-up natif PHP et méthodes d'implémentation supplémentaires en cliquant pour charger (exemples de code)

不言avant: 2019-02-18 13:30:504349parcourir

Le contenu que cet article vous apporte concerne les méthodes d'implémentation (exemples de code) du chargement par pull-up natif PHP et du chargement par clic. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. pour vous.

Objectif de conception

Lorsqu'un site Web contient beaucoup de données, il doit être divisé en pages pour une navigation facile. Afin de faciliter le changement de page, nous abandonnons le. clic traditionnel pour tourner les pages et faire défiler directement vers le bas pour charger automatiquement les données, ce qui facilite leur lecture.

Principe de conception

Initier une demande de rotation de page via ajax à l'interface back-end, envoyer le numéro de page, le back-end reçoit le numéro de page, renvoie json données, et le jquery frontal analyse le json et l'intègre à l'original. Basé sur certaines données !

Code

index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>jquery+ajax上拉加载更多</title>
    <style>
        *{margin:0;padding: 0;}
        #text p{
            width: 80%;
            padding: 5px 5px;
            background: #eee;
            margin:5px auto;
        }
        #loadmore{
            width: 120px;
            background: #eee;
            height: 45px;
            border-radius: 100px;
            margin:20px auto;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }

        #loading{
            text-align: center;
        }
    </style>
</head>
<body>
    <h3 id="loading"></h3>
    <div id="text"></div>
    <div id="loadmore">点击加载更多</div>
</body>
</html>

<!--引入jquery库-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script>
// 定义一个变量，等会用来控制多次触发
var i=0;
$(window).scroll(function(){
  //获取滚动时距离浏览器顶部的值
　var t=$(this).scrollTop();
  //获取当前窗口的高度
　var h=$(this).height();
  //获取按钮距离浏览器顶部的值
　var h1=$('#loadmore').offset().top;
  //用按钮的值-滚动条的值与窗口高度进行比较，如果小时，则表示按钮进入可视区，同时也表示滚动条即将到达底部
　if(h1-t<h){
    //防止快速下拉时多次触发
　　if(i==0){
      //改变i的值
　　　i=1;
　　　//触发点击事件
　　　$(&#39;#loadmore&#39;).click();
　　}
　}
});

// 加载初始数据
var p = 1;
$.ajax({
　　type:"get",
　　url:&#39;server.php?page=&#39; + p,
　　data:{},
　　dataType:"json",
　　success:function(data){
      for (var a in data){
          $(&#39;#text&#39;).append("<p>"+data[a].resname+"</p>");
          $("#loading").remove();
      }

　　　i=0;
      
　　},
    error:function(data){

　　},
    beforeSend:function(data){
        $('#loading').append("加载中");
    }
　});

// 加载更多
$('#loadmore').click(function(){
  p++;
　$.ajax({
　　type:"get",
　　url:'server.php?page=' + p,
　　data:{},
　　dataType:"json",
　　success:function(data){
      for (var a in data){
          $('#text').append("<p>"+data[a].resname+"</p>");
          $("#loading").remove();
      }
　　　i=0;
　　},
    error:function(data){
　　　$('#text').append("<p>"+服务器错误+"</p>");
　　},
    beforeSend:function(data){
        $('#loading').append("加载中");
    }
　});
});
</script>

server.php

<?php
header("Content-type:application/json");
header(&#39;Access-Control-Allow-Origin:*&#39;);
// 连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
if (!$con){die(&#39;Could not connect: &#39; . mysql_error());}

mysql_select_db("数据库名", $con);
mysql_query("SET NAMES UTF8");

// 每页显示条数
$pageLine = 5;

// 计算总记录数
$ZongPage = mysql_query("select count(*) from 表名");

// 计算总页数
$sum = mysql_fetch_row($ZongPage);
$pageCount = ceil($sum[0]/$pageLine);   
 
// 定义页码变量
@$tmp = $_GET[&#39;page&#39;];

 
// 计算分页起始值
$num = ($tmp - 1) * $pageLine;
 
// 查询语句
$result = mysql_query("SELECT 字段 FROM  表名 ORDER BY id DESC LIMIT " . $num . ",$pageLine");

//遍历输出
$results = array();
while ($row = mysql_fetch_assoc($result)) {
$results[] = $row;
}
echo json_encode($results);

//分页按钮
//上一页
$lastpage = $tmp-1;
//下一页
$nextpage = $tmp+1;

//防止翻过界
if (@$tmp > $pageCount) {
    echo "[{\"result\":\"没有了\"}]";
}

// 关闭数据库连接
mysql_close($con);
?>

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Qu’est-ce que PHP-FPM ? Introduction à la gestion et à la configuration de PHP-FPMArticle suivant：Qu’est-ce que PHP-FPM ? Introduction à la gestion et à la configuration de PHP-FPM

Articles Liés

Voir plus