黄昏より暗きもの、血の流れより赤きもの

読者です 読者をやめる 読者になる 読者になる

黄昏より暗きもの、血の流れより赤きもの

自分の好きな事を好きなように書いて行きます。

PHP+JQuery+MySQLで画面遷移無しにDBの中身を表示する

本日は「jQuery.ajaxで簡単に非同期通信:背負い投げとENTER_FRAME」さんのページのソースを参考にして、女の子のプロフが表示されたアプリケーションを作成しました。ページを設け3人ずつ表示が切り替わるようにしました。やる事を具体的にまとめると以下のようになります。


問題(今日やること)





上の色付きの部分は女の子の画像で、下の部分は女の子のプロフィールを表します。このときPHP+JQueryを用いて同じページ内で3人ずつ表示が切り替わるようにして下さい。女の子を表示するのに必要なデータベースのテーブルは、以下の図を参考にして下さい。又JQueryPHPの部分については、こちらを参考にして下さい。実行結果はこちら

テーブルgirl_listsの概要


カラム名主キー、NOT NULL内訳
idint(10)PRIMARY_KEY,NOT NULL主キー
bustint(3)バスト
westint(3)ウエスト
hipint(3)ヒップ
nametext名前
tailint(3)身長

プログラムの解説


大まかな流れ


まずpage.htmlからgetAr.phpの方へPOSTします。getAr.phpではDBに接続し表示に必要なデータを取って来て、page.htmlの方へ送ります(return)。このときpage.htmlはgetAr.phpから受け取った内容をJSON.parseメソッドにより配列の形に変換し、JQueryにより各タグの中身を書き換える事で、同じhtmlファイル内で内身が切り替わります。

grtAr.phpの流れ


まずはMySQLに接続し、テーブルgirl_listsのレコード数を数えます(〜27行目まで)。次に最大ページ数を計算(28〜32行目)し、現在開いているページ数を決定していきます。そしてページ数の最初の番号と、表示数$colを元に必要なレコードを呼び出し、配列に格納してpage.htmlに送り返します。

JQueryの各種メソッド


ここでgetAr.phpから送られた配列は、page.htmlのul#list1,ul#list2,ul#list3の各部分に反映されます。このとき各liタグに女の子の名前(name)、身長(tail)、バスト(bust)、ウエスト(west)、ヒップ(hip)の各項目が反映されます。この時に使われてるJQueryの関数をまとめると以下のようになります。



  • $("id名").remove():idに対応するタグと、その中身を全て削除

  • $("id名").append():idの中身にタグなどを挿入する

  • $('htmlタグ').html(val):特定のhtmlタグの中に変数valの内身をhtmlタグの形で反映させる

  • $('htmlタグ').text(val):特定のhtmlタグの中に変数valの内身をテキストの形で反映させる

解答:ソースコード


page.html


getAr.php


実行結果


URL:http://ryuichi64.daiwa-hotcom.com/PHPJQueryPractice/page.php

クリックを繰り返す事で、上のように巨乳の女の子が出てくれば問題ないです。尚画像は「The Smoking Jacket」より拝借してきました(笑)。又freewebさんのページ上でgetAr.phpではaタグが入ってしまっているので、出力されて来た文字列arrをslice関数を使って除去しました。