PHP と Ajax は非リフレッシュページング機能のコード共有を実装します-PHPチュートリアル-php.cn

ホームページ

バックエンド開発

PHPチュートリアル

PHP と Ajax は非リフレッシュページング機能のコード共有を実装します

小云云

Feb 10, 2018 am 10:44 AM

ajax php 関数

この記事では、主に PHP+Ajax で実装されたリフレッシュフリーのページング機能を紹介し、具体的な例に基づいてデータベースを読み取ってページングで表示するための PHP+Ajax の関連実装テクニックを pdo 操作クラスを通じて分析します。デモのソースコードを読者が参照用にダウンロードできるようにします。必要な友人はそれを参照できます。これがすべての人に役立つことを願っています。

注: この記事で使用されている一部のクラスライブラリのソースコードは、以前の記事に記載されています。記事の長さを短くするために、記事内にリンクを記載します。読む。

この記事では、リフレッシュフリーページングの Ajax 実装、実装原理、コード表示、およびコードダウンロードについて説明します。

ここでいくつかの知識を説明する必要があります:

1. ページを更新せずに Ajax を使用する利点: 優れた顧客エクスペリエンスを提供し、データベースからデータを取得して Ajax を通じてバックグラウンドで表示し、表示される空白の状態を排除します。ページがロードされるのを待っている間;

2. つまり、Ajax の非更新ページは動的ページ (.php) 上で実行されるのでしょうか?それとも静的ページ (.html/.htm/.shtml) ですか?答えは次のとおりです: 静的ページ;

3. 実装原理: 動的ページから返されるデータは、フロントエンド JS スクリプトプログラムと Ajax の組み合わせを通じて取得および表示されます。

それでは、以下のコードを説明していきます。

静的ページで実行するので、まず静的HTMLページを作成します。index.htmlのコードリストは以下の通りです。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script> <!-- 载入 Ajax 类库 -->
<title>Ajax 实现无刷新页面</title>
<style type="text/css">
 body {
  font-size:12px;
 }
</style>
</head>
<body>
 <p id="fpage">数据加载中...</p>
</body>
</html>

ログイン後にコピー

コードリストでは、Ajax クラスライブラリをロードしました。これは記事 http://www.jb51.net/article/82066.htm (および添付の方法) にあります。

この静的ページでは、「データを読み込んでいます...」と表示されるだけで、データはありません。このとき、Ajax を介してデータベースからデータを取得するための JS スクリプトが必要です。 JS スクリプトは次のとおりです。

<script type="text/javascript">
 /**
 * setPage(url) 根据 url 从 article.php 中获取数据
 * @param int pageNum 页码
 * @return string
 */
 var cache=new Array(); // 缓存变量，当数据被访问过之后放置在缓存中，加快访问速度
 function setPage(pageNum) {
  var fpage = document.getElementById(&#39;fpage&#39;); // 获取 fpage 对象
  // 如果缓存中存在数据，那么直接从缓存中读取；如果不存在数据，那么就从数据库中读取，并把数据存入缓存
  if (typeof(cache[pageNum])==&#39;undefined&#39;) {
   var ajax = Ajax();
   ajax.get(&#39;article.php?page=&#39;+pageNum, function(data){
    fpage.innerHTML = data; // fpage对象的内容是从 article.php 中取来的
    cache[pageNum] = data;
   })
  } else {
   fpage.innerHTML = cache[pageNum];
  }
 }
 setPage(1); // 默认执行
</script>

ログイン後にコピー

上記のコードを注意深く読むと、次の現象がわかります。

1. setPage(pageNum) は、Ajax からデータを抽出する JS 関数インターフェイスです。
3.article.php?page=xx を介してデータを取得します。xx は取得するページ番号のデータです。
setPage(2) ): 2 ページ目のデータを取得します Page data;
setPage(100): 100 番目のページのデータを取得します。以下のコードリストを参照してください。

article.php

<?php
/**
* $Id: article.php
* author Lee.
* Last modify $Date: 2012-01-21 16:53:05 $
*/
require_once &#39;./config.inc.php&#39;;
$m = new Model();
$page = new ajaxPage($m->total(&#39;article&#39;),20); // $m->total(&#39;article&#39;) 获取 article 表的记录数；10为每页显示十条
$result = $m->fetchAll(&#39;article&#39;, &#39;*&#39;, &#39;&#39;, &#39;&#39;, $page->limit); // 取出数据，^_^，很方便吧
echo &#39;<table align="center" border="1" width="1100" style="border-collapse:collapse;font-size:14px;" bordercolor="#666">&#39;;
echo &#39;<caption><h1>华强电子网资讯</h1></caption>&#39;;
echo &#39;<tr height="25"><th>ID</th><th>Title</th><th>Author</th><th>Source</th><th>Date</th></tr>&#39;;
foreach ($result as $v) {
 echo "<tr height=&#39;21&#39;><td align=&#39;center&#39;>{$v[&#39;id&#39;]}</td><td>{$v[&#39;title&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;author&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;source&#39;]}</td><td align=&#39;center&#39;>{$v[&#39;date&#39;]}</td></tr>";
}
echo &#39;<tr><td align="right" colspan="5">&#39;.$page->fpage().&#39;</td></tr>&#39;;
echo &#39;</table>&#39;;
?>

ログイン後にコピー

article.phpで接続されているデータは、前回の記事で華強電子網から取得した情報データです。データが比較的大きいため、article.sqlファイルをコードに添付します。誰でもテストできるパッケージのダウンロード。

静的ページindex.htmlに表示されるデータは、article.phpファイル内のエコーコードです。

コードファイル内の config.inc.php ファイルは主に、データベースユーザー名、データベースパスワード、ホスト...、データベース接続クラスライブラリ (Db.class.php)、データベース操作クラスライブラリ ( Model.class.php) の使用方法については、記事 http://www.jb51.net/article/82063.htm を参照してください。

プログラムのレンダリング:

下の図は、注意を払うべき場所を示しています。

このようにして、Ajaxの非リフレッシュページングが完成します。プログラム内には説明していない ajaxPage.class.php もありますが、実はこの ajaxPage クラスライブラリの使い方は一般的なページングクラスライブラリと同じです。

つまり:

$page = new ajaxPage(记录总数, 每页显示数);

ログイン後にコピー

Ajax no-refresh ページング効果の簡単な実装

php Ajax no-refresh ページング、サポート ID 位置決めサンプルコード

JQuery+Ajax no-refresh ページングサンプルコード

以上がPHP と Ajax は非リフレッシュページング機能のコード共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7478

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Ubuntu および Debian 用の PHP 8.4 インストールおよびアップグレードガイド Dec 24, 2024 pm 04:42 PM

PHP 8.4 では、いくつかの新機能、セキュリティの改善、パフォーマンスの改善が行われ、かなりの量の機能の非推奨と削除が行われています。このガイドでは、Ubuntu、Debian、またはその派生版に PHP 8.4 をインストールする方法、または PHP 8.4 にアップグレードする方法について説明します。