PHP-natives Pull-up-Laden und Click-to-Load weiterer Implementierungsmethoden (Codebeispiele)

Der Inhalt dieses Artikels befasst sich mit den Implementierungsmethoden (Codebeispiele) des nativen Pull-Up-Ladens und Klickens. Ich hoffe, dass er hilfreich ist dir geholfen.

Designzweck

Wenn eine Website viele Daten enthält, muss sie zum einfachen Durchsuchen in Seiten unterteilt werden. Um das Umblättern zu erleichtern, verzichten wir darauf Herkömmliches Klicken, um Seiten umzublättern und direkt nach unten zu scrollen, um die Daten automatisch zu laden und so das Lesen zu erleichtern.

Designprinzip

Initiieren Sie über Ajax eine Umblätteranforderung an die Back-End-Schnittstelle, senden Sie die Seitenzahl, das Back-End empfängt die Seitenzahl und gibt JSON zurück Daten, und die Front-End-JQuery analysiert den JSON und fügt ihn in das Original ein. Basierend auf einigen Daten!

Code

index.html

nbsp;html>


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


    <h3></h3>
    <div></div>
    <div>点击加载更多</div>



<!--引入jquery库-->
<script></script>
<script>
// 定义一个变量，等会用来控制多次触发
var i=0;
$(window).scroll(function(){
  //获取滚动时距离浏览器顶部的值
　var t=$(this).scrollTop();
  //获取当前窗口的高度
　var h=$(this).height();
  //获取按钮距离浏览器顶部的值
　var h1=$(&#39;#loadmore&#39;).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+"");
          $("#loading").remove();
      }

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

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

// 加载更多
$(&#39;#loadmore&#39;).click(function(){
  p++;
　$.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+"");
          $("#loading").remove();
      }
　　　i=0;
　　},
    error:function(data){
　　　$(&#39;#text&#39;).append("<p>"+服务器错误+"");
　　},
    beforeSend:function(data){
        $(&#39;#loading&#39;).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);
?>

Das obige ist der detaillierte Inhalt vonPHP-natives Pull-up-Laden und Click-to-Load weiterer Implementierungsmethoden (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!