asideコンテンツをMySQLDB化、PHPとJSのAjaxで非同期通信して表示
1.あらかじめasideコンテンツをパーツ化し、MySQLDBの各フィールドに保存する。
フィールド:通しNo、タイトル用No(全角混在)、画像のPATHファイル名を含めたimgタグ、サブタイトルのh4タグ、
コンテンツ文章のpタグ
2.aside用JS外部ファイルaside.jsのAjax関数を実行。メニューでコンテンツを選択した時はコンテンツNoをsend送信、
ページオープン時のランダム表示の場合は空データでsend送信してMySQL取得用phpと通信する。
3.リクエストのあったphpはsendできたデータのNoがあればそのNoを、なければrand関数でランダム番号を作って
WHEREで指定しMySQLDBからSELECT実行。取得した配列データをJSONのテキストデータに変換しechoで送信する。
MySQLDBデータ取得、データ送信用php: aside_send.php --------------------------------------------------------------------- <?php //XMLHttpRequest 以外はエラー $headers = getallheaders(); if ($headers["X-Requested-With"] != "XMLHttpRequest") { header("HTTP/1.1 403 Forbidden"); exit; } //セキュリティ用ヘッダー付与 header("Content-Type: application/json; charset=utf-8"); header('X-Content-Type-Options: nosniff'); $val = $_POST["msg"]; if ($val == ""){ //no msg $val = rand(0,9); //no msg } $dsn = "mysql:dbname=s.21;host=localhost"; $user = "root"; $pass = "xxxx"; try{ $my_Con = new PDO($dsn, $user, $pass); }catch(PDOException $e){ echo "接続に失敗しました:".$e->getMessage(); exit; } $my_Row = $my_Con->query("SELECT * FROM aside WHERE no = \"$val\""); if(!$my_Row){ $info = $my_Con->errorInfo(); exit($info[2]); } $row = $my_Row->fetch(PDO::FETCH_ASSOC); echo json_encode($row); flush(); ?> ---------------------------------------------------------------------
4.JSのAjax関数非同期通信で受け取ったJSONデータから配列データに変換し、それぞれのプレースホルダにinnerHTML
で表示させる。
データ取得、リクエスト用Ajax関数 --------------------------------------------------------------------- function asideajx(url, index) { var val = encodeURI(index); var r = new XMLHttpRequest(); r.open("POST", url, true); //HTTPヘッダー付与、JSON ハイジャック対策 r.setRequestHeader("X-Requested-With","XMLHttpRequest"); r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200){ return; }; //JSON パース(eval インジェクション対策) //Internet Explorer 8 以降 var msg = JSON.parse(r.responseText); var acr_no = msg["no"]; var title = msg["sono"]; var data = msg["img"]+msg["h4"]+msg["pt"]; chk_radioselect("rd_casides")[acr_no][2].checked = true; getId("aside_title_sp").textContent = title; getId("contents_aside").innerHTML = data; }; r.send("msg=" + val); }//end of function asideajx("aside_send.php", no);で指定したnoのasideコンテンツ表示 asideajx("aside_send.php", "");でランダムのnoのasideコンテンツ表示 ---------------------------------------------------------------------