BLOG

2014年5月11日/

[jQuery] 非同期でコンテンツを「更に読み込む」の実装サンプル

 

「新着情報」や「商品紹介」などの一覧ページで、何件か表示して「更に読み込む」のようなボタンを押すとページ遷移するのではなく、非同期で次の○件を読み込んで表示するといったサイトがここ最近多いと思います。

 

そこで今回はjqueryのajaxを使用し、上記のような機能を実装したサンプルを紹介します。

 

商品一覧ページで、最初に3件商品が表示されており、「更に読み込む」クリックで、3件追加で読み込んでいくというものです。

 

■HTML

 

■javascript

 

■php(load.php)

 

(javascript)

まず始めに$.get関数を実行し、最初に表示される3件を取得しています。

また、「更に読み込む」(id=load_product)をクリックすると、同じく$.getを実行するように記載しておきます。

 

$.getは、最初に読み込むファイル(ここではload.php)を指定し、次に渡す変数と値を指定、最後に読み込むが成功した後に実行する関数を指定します。

 

(php)

load.phpでは上記$.getで渡された変数「page」を利用し、次の3件をDBから取得し、追加するhtml文を作成してprintします。

 

(javascript)

phpから返ってきたhtml(result)をappendToを使ってid=productに追加します。

 

これで非同期で次々に3件ずつ商品を読み込んで表示していくといったことができます。

 

 

Resent Posts

Category