cari
Rumahpembangunan bahagian belakangtutorial phpphp原生上拉加载以及点击加载更多的实现方法(代码示例)

php原生上拉加载以及点击加载更多的实现方法(代码示例)

Feb 18, 2019 pm 01:30 PM
ajaxjavascriptphpsenarai juntai bawah

本篇文章给大家带来的内容是关于php原生上拉加载以及点击加载更多的实现方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

设计目的

一个网站的数据非常多的时候,需要分页,方便浏览,为了方便翻页,那么我们摒弃传统的点击翻页,直接往下拉,不停地自动加载数据,这样就可以方便阅读。

设计原理

通过ajax向后端接口发起翻页请求,发送页码,后端接收页码,返回json数据,前端jquery解析json并且拼接在原有的数据基础上!

代码

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);
?>

Atas ialah kandungan terperinci php原生上拉加载以及点击加载更多的实现方法(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Penggunaan PHP yang berterusan: Sebab -sebab ketahanannyaPenggunaan PHP yang berterusan: Sebab -sebab ketahanannyaApr 19, 2025 am 12:23 AM

Apa yang masih popular adalah kemudahan penggunaan, fleksibiliti dan ekosistem yang kuat. 1) Kemudahan penggunaan dan sintaks mudah menjadikannya pilihan pertama untuk pemula. 2) Bersepadu dengan pembangunan web, interaksi yang sangat baik dengan permintaan HTTP dan pangkalan data. 3) Ekosistem yang besar menyediakan banyak alat dan perpustakaan. 4) Komuniti aktif dan Sumber Sumber Terbuka menyesuaikan mereka dengan keperluan baru dan trend teknologi.

PHP dan Python: Meneroka Persamaan dan Perbezaan merekaPHP dan Python: Meneroka Persamaan dan Perbezaan merekaApr 19, 2025 am 12:21 AM

PHP dan Python adalah kedua-dua bahasa pengaturcaraan peringkat tinggi yang digunakan secara meluas dalam pembangunan web, pemprosesan data dan tugas automasi. 1.Php sering digunakan untuk membina laman web dinamik dan sistem pengurusan kandungan, sementara Python sering digunakan untuk membina kerangka web dan sains data. 2.Php Menggunakan Echo ke Kandungan Output, Python Menggunakan Cetakan. 3. Kedua-dua sokongan pengaturcaraan berorientasikan objek, tetapi sintaks dan kata kunci adalah berbeza. 4. PHP menyokong penukaran jenis lemah, manakala Python lebih ketat. 5. Pengoptimuman Prestasi PHP termasuk menggunakan OPCACHE dan pengaturcaraan asynchronous, manakala Python menggunakan pengaturcaraan CProfile dan tak segerak.

PHP dan Python: Paradigma yang berbeza dijelaskanPHP dan Python: Paradigma yang berbeza dijelaskanApr 18, 2025 am 12:26 AM

PHP terutamanya pengaturcaraan prosedur, tetapi juga menyokong pengaturcaraan berorientasikan objek (OOP); Python menyokong pelbagai paradigma, termasuk pengaturcaraan OOP, fungsional dan prosedur. PHP sesuai untuk pembangunan web, dan Python sesuai untuk pelbagai aplikasi seperti analisis data dan pembelajaran mesin.

PHP dan Python: menyelam mendalam ke dalam sejarah merekaPHP dan Python: menyelam mendalam ke dalam sejarah merekaApr 18, 2025 am 12:25 AM

PHP berasal pada tahun 1994 dan dibangunkan oleh Rasmuslerdorf. Ia pada asalnya digunakan untuk mengesan pelawat laman web dan secara beransur-ansur berkembang menjadi bahasa skrip sisi pelayan dan digunakan secara meluas dalam pembangunan web. Python telah dibangunkan oleh Guidovan Rossum pada akhir 1980 -an dan pertama kali dikeluarkan pada tahun 1991. Ia menekankan kebolehbacaan dan kesederhanaan kod, dan sesuai untuk pengkomputeran saintifik, analisis data dan bidang lain.

Memilih antara php dan python: panduanMemilih antara php dan python: panduanApr 18, 2025 am 12:24 AM

PHP sesuai untuk pembangunan web dan prototaip pesat, dan Python sesuai untuk sains data dan pembelajaran mesin. 1.Php digunakan untuk pembangunan web dinamik, dengan sintaks mudah dan sesuai untuk pembangunan pesat. 2. Python mempunyai sintaks ringkas, sesuai untuk pelbagai bidang, dan mempunyai ekosistem perpustakaan yang kuat.

PHP dan Rangka Kerja: Memodenkan bahasaPHP dan Rangka Kerja: Memodenkan bahasaApr 18, 2025 am 12:14 AM

PHP tetap penting dalam proses pemodenan kerana ia menyokong sejumlah besar laman web dan aplikasi dan menyesuaikan diri dengan keperluan pembangunan melalui rangka kerja. 1.Php7 meningkatkan prestasi dan memperkenalkan ciri -ciri baru. 2. Rangka kerja moden seperti Laravel, Symfony dan CodeIgniter memudahkan pembangunan dan meningkatkan kualiti kod. 3. Pengoptimuman prestasi dan amalan terbaik terus meningkatkan kecekapan aplikasi.

Impak PHP: Pembangunan Web dan seterusnyaImpak PHP: Pembangunan Web dan seterusnyaApr 18, 2025 am 12:10 AM

Phphassignificantelympactedwebdevelopmentandextendsbeyondit.1) itpowersmajorplatformslikeworderpressandexcelsindatabaseIntions.2) php'SadaptabilityAldoStoScaleforlargeapplicationFrameworksLikelara.3)

Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?Apr 17, 2025 am 12:25 AM

Jenis PHP meminta untuk meningkatkan kualiti kod dan kebolehbacaan. 1) Petua Jenis Skalar: Oleh kerana Php7.0, jenis data asas dibenarkan untuk ditentukan dalam parameter fungsi, seperti INT, Float, dan lain -lain. 2) Return Type Prompt: Pastikan konsistensi jenis nilai pulangan fungsi. 3) Jenis Kesatuan Prompt: Oleh kerana Php8.0, pelbagai jenis dibenarkan untuk ditentukan dalam parameter fungsi atau nilai pulangan. 4) Prompt jenis yang boleh dibatalkan: membolehkan untuk memasukkan nilai null dan mengendalikan fungsi yang boleh mengembalikan nilai null.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini