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コンテンツ表示
---------------------------------------------------------------------