PHP ネイティブのプルアップ読み込みとクリックトゥロードのその他の実装メソッド (コード例)
この記事で紹介する内容は、PHPネイティブのプルアップロードとクリックロードの実装方法(コード例)に関するもので、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。あなたに、助けられました。
デザインの目的
Web サイトに大量のデータが含まれる場合、閲覧しやすいようにページを分割する必要があります。ページめくりを容易にするために、従来のクリックでページをめくり、直接下にスクロールしてデータを自動的にロードするため、読みやすくなります。
設計原理
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;
//触发点击事件
$('#loadmore').click();
}
}
});
// 加载初始数据
var p = 1;
$.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){
},
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('Access-Control-Allow-Origin:*');
// 连接数据库
$con = mysql_connect("数据库地址","数据库账号","数据库密码");
if (!$con){die('Could not connect: ' . 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['page'];
// 计算分页起始值
$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);
?>以上がPHP ネイティブのプルアップ読み込みとクリックトゥロードのその他の実装メソッド (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7467
15
1376
52
77
11
19
20
Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレード ガイド
Dec 24, 2024 pm 04:42 PM
PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。 このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。
CakePHP について話し合う
Sep 10, 2024 pm 05:28 PM
CakePHP は、PHP 用のオープンソース フレームワークです。これは、アプリケーションの開発、展開、保守をより簡単にすることを目的としています。 CakePHP は、強力かつ理解しやすい MVC のようなアーキテクチャに基づいています。モデル、ビュー、コントローラー
CakePHP ファイルのアップロード
Sep 10, 2024 pm 05:27 PM
ファイルのアップロードを行うには、フォーム ヘルパーを使用します。ここではファイルアップロードの例を示します。
CakePHP のロギング
Sep 10, 2024 pm 05:26 PM
CakePHP へのログインは非常に簡単な作業です。使用する関数は 1 つだけです。 cronjob などのバックグラウンド プロセスのエラー、例外、ユーザー アクティビティ、ユーザーが実行したアクションをログに記録できます。 CakePHP でのデータのログ記録は簡単です。 log()関数が提供されています
PHP 開発用に Visual Studio Code (VS Code) をセットアップする方法
Dec 20, 2024 am 11:31 AM
Visual Studio Code (VS Code とも呼ばれる) は、すべての主要なオペレーティング システムで利用できる無料のソース コード エディター (統合開発環境 (IDE)) です。 多くのプログラミング言語の拡張機能の大規模なコレクションを備えた VS Code は、
CakePHP クイックガイド
Sep 10, 2024 pm 05:27 PM
CakePHP はオープンソースの MVC フレームワークです。これにより、アプリケーションの開発、展開、保守がはるかに簡単になります。 CakePHP には、最も一般的なタスクの過負荷を軽減するためのライブラリが多数あります。
