このプロジェクトでは、ユーザーがファイルをダウンロードするたびに、対応するダウンロード数が 1 ずつ増加します。同様のアプリケーションが使用されています。多くのダウンロード サイトで。この記事では、例に基づいて PHP + Mysql + jQuery を使用して、ファイルのクリック、ファイルのダウンロード、および時間の蓄積のプロセス全体を非常にスムーズに実現します。
準備
この例では、読者が PHP、Mysql、jQuery、html、css などの基本的な知識を持っている必要があります。この例を開発する前に、この記事では記録するファイル ダウンロード テーブルがあることを前提としています。ファイルサーバー上のファイル名とダウンロード数を指定して保存します。前提条件として、データはダウンロード テーブルに既に存在しており、このデータはページで読み取ることができるように、プロジェクトのバックグラウンド アップロード ファイルから挿入される可能性があります。ダウンロード テーブルの構造は次のとおりです:
デモを直接ダウンロードして SQL ファイルをインポートすることもでき、データはすべてそこにあります。
HTML
次の HTML 構造をindex.html ページ本文に追加します。ul.filelist はファイル リストを表示するために使用されます。ここでは jQuery を使用してファイル リストを非同期的に読み取ります。 jQuery ライブラリ ファイルを HTML でロードする必要もあります。
CSS
デモではページ効果をより適切に表示できるように、CSS を使用してページを変更します。もちろん、実際のプロジェクトでは、必要に応じて対応するスタイルを設定できます。
PHP
よりわかりやすくするために、2 つの PHP ファイルに分割します。1 つは filelist.php です。これは、mysql データ テーブル内のデータを読み取り、そのデータを JSON 形式で出力してフロントエンドのindex.html ページを呼び出すために使用されます。 other これは、download.php で、ダウンロード アクションに応答し、対応するファイルのダウンロード数を更新し、ブラウザーを介してダウンロードを完了するために使用されます。 filelist.php は、ダウンロード テーブルを読み取り、json_encode() を通じて JSON 形式でデータを出力します。これは、次の Ajax 非同期操作のために準備されています。
download.phpはURLに従ってパラメータを渡し、該当するデータを取得するためにクエリを実行し、ダウンロードするファイルが存在するかどうかを検出し、存在する場合は該当するデータのダウンロード数を+1して更新し、header()を使用します。ダウンロード機能を実装します。 header() 関数を使用してファイルを強制的にダウンロードし、ダウンロード後にファイル名をローカルに保存するように設定できることに注意してください。通常の状況では、バックグラウンド アップロード プログラムを使用して、アップロードされたファイルの名前を変更し、サーバーに保存します。この利点の 1 つは、ファイル名の重複や中国語名の文字化けを回避できることです。 。ローカルにダウンロードするファイルの場合は、 header("Content-Disposition:attachment; filename=" .$filename) を使用して、ファイル名を簡単に識別できるファイル名に設定できます。
jQuery
フロントエンドページの jQuery は主に 2 つのタスクを実行します。1 つは、Ajax を介してファイルリストを非同期に読み取って表示することです。もう 1 つは、ユーザーのクリックイベントに応答して、対応するファイルのダウンロード数を 1 増やすことです。コードを見てみましょう:
まず、ページがロードされた後、$.ajax() を介して GET の形式でバックグラウンドの filelist.php に Ajax リクエストを送信します。 filelist.php が成功すると、返された json データを受け取り、$ を介して json を走査します。 .each() データ オブジェクトを作成し、HTML 文字列を構築し、最終的な文字列を ul.filelist に追加して、デモのファイル リストを形成します。
その後、ファイルがクリックされてダウンロードされると、動的に追加されたリスト要素のクリックイベントが live() を通じて応答され、ダウンロード数が累積されます。
最後に、実際にこの記事を読んだ後、これは私たちが通常適用する Ajax のケースであり、ダウンロードを実装するために PHP と mysql を組み合わせた知識もあります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
