新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【Ajax・xml・php】プルダウン選択時にMysqlの値を取得し、画面上に表示する

Ｊａｖａｓｃｒｉｐｔ プログラミング 自己学習 Ａｊａｘ ＰＨＰ Ｍｙｓｑｌ

【今回の紹介】

今回は、


タイトルにある通り

プルダウン選択時にMysqlの値を取得し、画面上に表示する

をやります


流れとしては、


①Ａjax使用時の値の取得方法まとめ

②処理の流れ

③参考ソース

なかんじで紹介していきます。

【内容】

①Ａjax使用時の値の取得方法まとめ


Ajaxを使用するときは値の方法がいくつかあると思います。
今の自分の知識で思いつく限りあげます。

※ちなみに今回は（５）のphpにてDBから値処理後をxmlに変換してレンスポンスを受け取るということを行いたいと思います。



ajax（非同期通信）後の値の取得の種類

　(1)取得しない
　　→ajaxによりphp側にpostしてDBへの登録・更新処理・削除処理などを行わせる
　(2)外部のxmlファイルを取得
　　 →responsexmlによりxmlファイルをDOM構造で受け取る
　(3)外部のtextファイルを取得
　　 →responseTextによりテキストで取得
　(4)php処理後の値をtextで取得
　　 →php側でresponseする内容をprint 〇〇;またはecho〇〇;で記述し、responseTextによりテキストで取得
　(5)php処理後の値をxmlで取得

　　→php側でresponseする内容をxml形式に書き換えて取得します。responseXML


②処理の流れ

想定としては、検索処理というかんじで考えています。


「ＤＢ検索処理」

　①検索条件をプルダウンから選択

　②プルダウン選択時にAjax処理がはしる

　③プルダウンの値をphp側にPOSTする

　④php側で値を受け取りsqlの発行

　⑤結果をxml形式に変換する

　⑥xml形式レスポンスをうけとる

　⑦受け取ったxml形式レスポンス（DOM構造）をjs側で要素を作成し、代入


【参考ソース】


抜粋

「プルダウンの値取得」

    <select onChange="serch_input(select_serch=this.options[this.selectedIndex].innerHTML)">
    <option></option>
    <option value="doing_t">実行中タスク</option>
    <option value="done_t">完了タスク</option>
    </select>


「プルダウンの値を取得し、POST」

function serch_input(val){
    var result_value="";
	var send_value1=val;
	var url="serch.php";
	var httpobj =createHttpRequest();
	httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
  			alert(httpobj.statusText);
  			result_value=httpobj.responseXML;
  			serch_output(result_value);
  			}
			};

		httpobj.open("POST",url);
		httpobj.setRequestHeader('Pragma', 'no-cache');
		httpobj.setRequestHeader('Cache-Control', 'no-cache');
		httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
		httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		httpobj.send("send_value="+send_value1);
		
		
}


「SQLの発行とxml出力」

<?php
header('Content-Type: text/html; charset=UTF-8');
$value=$_POST['send_value'];

 $mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
		if($mysqli->connect_error){echo "ＤＢ接続できませーん";}
	$stmt=$mysqli->prepare("SET NAMES utf8");
	$stmt->execute();
	if($value=="実行中タスク")
	$stmt=$mysqli->prepare("select id,name,category,update_time from t_01 where delflg=0 ") or exit("error");
	else{
	$stmt=$mysqli->prepare("select id,name,category,update_time from t_01 where delflg=1 ") or exit("error");
	}
	$stmt->execute();
	$stmt->bind_result($result_id,$result_name,$result_category,$result_time);
header("Content-type: text/xml");
echo'<?xml version="1.0" encoding="utf-8" ?>';
echo '<lists>';
while($stmt->fetch()){
echo '<list>';
echo '<id>'.$result_id.'</id>';
echo '<name>'.$result_name.'</name>';
echo '<category>'.$result_category.'</category>';
echo '<updatetime>'.$result_time.'</updatetime>';
echo '</list>';
}
echo '</lists>';
?>


「うけとったDOM構造のxmlを分解。htnl要素を作成し代入」

function serch_output(xmldate){
var div_serch_result=document.getElementById("serch_result");

if(div_serch_result.hasChildNodes){
		div_serch_result.removeChild(div_serch_result.firstChild);
}
var table=document.createElement("table");
var tbody=document.createElement("tbody");

var nodelist=xmldate.getElementsByTagName('list');

	for(var i=0;i<nodelist.length;i++){
	var row=document.createElement("tr");
	
		for(var k=0;k<4;k++){
			var cell=document.createElement("td");
			cell.innerHTML=nodelist[i].childNodes[k].childNodes[0].nodeValue;
			row.appendChild(cell);
		}
		tbody.appendChild(row);
	}
	table.appendChild(tbody);
	table.border=1;
	document.getElementById("serch_result").appendChild(table);
}

全体ソース
phpファイル

<?php
/*レコードが存在するか判定(リストidのセット)*/
$mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
if($mysqli->connect_error){echo "ＤＢ接続できませーん";}
$stmt=$mysqli->prepare("SET NAMES utf8");
$stmt->execute();
$stmt=$mysqli->prepare("select id from t_01 order by id desc limit 1 ") or exit("error");
$stmt->execute();
$stmt->bind_result($result_lastid);
$stmt->fetch();
$last_id=$result_lastid;
$last_id=$last_id+1;
?>



<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<?php
/*
  header('Content-Type: text/html; charset=UTF-8');
    $mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
		if($mysqli->connect_error){echo "ＤＢ接続できませーん";}
	$stmt=$mysqli->prepare("SET NAMES utf8");
	$stmt->execute();
	$stmt=$mysqli->prepare("select *  from t_01") or exit("error");
	$stmt->execute();
	$stmt->bind_result($result_id,$result_name,$result_category,$result_delflg,$result_time);

while($stmt->fetch()){
echo '<tr>';
echo '<td>'.$result_id.'</td>';
echo '<td>'.$result_name.'</td>';
echo '<td>'.$result_category.'</td>';
echo '<td>'.$result_delflg.'</td>';
echo '<td>'.$result_time.'</td>';

echo '</tr>';
}
*/
?>	






<div id="input">
    <h3>追加</h3>
    <select onChange="select_option=this.options[this.selectedIndex].innerHTML">
    <option></option>
    <option value="hight"> 優先度 高</option>
    <option value="nomal"> 優先度 中</option>
    <option value="low"> 優先度 低</option>
    </select>
	<input type="text" value="" id="add_text">
	<input type="button" value="追加" id="button" onclick="add_list()">
	
	<h3>検索</h3>
<select onChange="serch_input(select_serch=this.options[this.selectedIndex].innerHTML)">
    <option></option>
    <option value="doing_t">実行中タスク</option>
    <option value="done_t">完了タスク</option>
    </select>
	<div id="serch_result">
	</div>
	</div>
<div id="frame_toDo">
	<h1 id="h1_ToDo" onDblClick="allDel_li(this)">To Do</h1>
	<ul id="ul_toDo"></ul>
</div>
<div id="frame_Doing">
	<h1 id="h1_Doing" onDblClick="allDel_li(this)";>Doing</h1>
	<ul id="ul_Doing"></ul>
</div>
<div id="frame_Done">
	<h1 id="h1_Done" onDblClick="allDel_li(this)">Done</h1>
	<ul id="ul_Done"></ul>
</div>

<div id="serch_result">
<table id="table" border=1>
</table>
</div>
<?php
echo <<<EOM
<script Language="JavaScript" type="text/javascript">
var count=1;
var index=$last_id;
var index_cheak=/[0-9]/;
if(index_cheak.test(index)==true){count=$last_id;}



<!--動的のリストを追加する処理-->
function serch_input(val){
    var result_value="";
	var send_value1=val;
	var url="serch.php";
	var httpobj =createHttpRequest();
	httpobj.onreadystatechange = function() {
  		if (httpobj.readyState == 4) {
  			alert(httpobj.statusText);
  			result_value=httpobj.responseXML;
  			serch_output(result_value);
  			}
			};

		httpobj.open("POST",url);
		httpobj.setRequestHeader('Pragma', 'no-cache');
		httpobj.setRequestHeader('Cache-Control', 'no-cache');
		httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
		httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		httpobj.send("send_value="+send_value1);
		
		
}

function serch_output(xmldate){
var div_serch_result=document.getElementById("serch_result");

if(div_serch_result.hasChildNodes){
		div_serch_result.removeChild(div_serch_result.firstChild);
}
var table=document.createElement("table");
var tbody=document.createElement("tbody");

var nodelist=xmldate.getElementsByTagName('list');

	for(var i=0;i<nodelist.length;i++){
	var row=document.createElement("tr");
	
		for(var k=0;k<4;k++){
			var cell=document.createElement("td");
			cell.innerHTML=nodelist[i].childNodes[k].childNodes[0].nodeValue;
			row.appendChild(cell);
		}
		tbody.appendChild(row);
	}
	table.appendChild(tbody);
	table.border=1;
	document.getElementById("serch_result").appendChild(table);
}




<!--動的のリストを追加する処理-->
function add_list(){
    var add_priority="("+select_option+")";
	var add_text=document.getElementById("add_text").value;
	var list_text=document.createTextNode(add_text+add_priority);
	var new_list=document.createElement("li");
	new_list.appendChild(list_text);
	new_list.id=count;  /*"new_list"+*/
	new_list.setAttribute("onDblClick","moveList(this)");
	new_list.setAttribute("onmouseover","addcolor(this)");
	new_list.setAttribute("onmouseout","defaultcolor(this)");
	document.getElementById("ul_toDo").appendChild(new_list);
	send_db(new_list.id);
	count++;
}
<!--ダブルクリックしたリストを移動する処理-->
function moveList(obj){
	var ul_toDo=document.getElementById("ul_toDo");
	var ul_Doing=document.getElementById("ul_Doing");
	var ul_Done=document.getElementById("ul_Done");
<!--どのカテゴリ(todo or doing or done)にあるリストか判定する処理-->
	if("frame_toDo"==obj.parentNode.parentNode.id){
		var clone=obj.cloneNode(true);
		ul_Doing.appendChild(clone);
		ul_toDo.removeChild(obj);
		send_db(clone.id);
		
	}
		else if("frame_Doing"==obj.parentNode.parentNode.id){
			var clone=obj.cloneNode(true);
			ul_Done.appendChild(clone);
			ul_Doing.removeChild(obj);
			send_db(clone.id);
		}
			else{
			send_db(obj.id);
			ul_Done.removeChild(obj);
			
			}
}
<!--リストにカーソルが当たると色を変える処理-->
function addcolor(obj){
	obj.style.color="#ff0000";
}

function defaultcolor(obj){
	obj.style.color="#000000";
}
<!--カテゴリー名（todo or doing or done）をダブルクリックすると配下の全リストを削除する処理-->
function allDel_li(obj){
	var allDel_ul=obj.nextSibling.nextSibling;
	var allDel_li=obj.nextSibling.nextSibling.childNodes;
		for(var i=allDel_li.length-1;i>=0;i--){
			allDel_ul.removeChild(allDel_li[i]);
		}
}

function send_db(obj_id){

		/*共通処理(obj.objのID.objのカテゴリの取得)*/
		var obj=document.getElementById(obj_id);
		var obj_ParentId=obj.parentNode.parentNode.id;
		var send_text1=encodeURIComponent(obj_id);
		var send_text2=encodeURIComponent(document.getElementById(obj_id).firstChild.nodeValue);
		var send_text3=encodeURIComponent(obj.parentNode.parentNode.id);
		switch(obj_ParentId){
				
				/*登録の処理内容*/
				case "frame_toDo":
					send_value=send_text1+","+send_text2+","+send_text3;
					var url="insert_db.php";
					var httpobj =createHttpRequest();
					httpobj.onreadystatechange = function() {
  						if (httpobj.readyState == 4) {
    						alert(httpobj.statusText);
  						}
					};
					httpobj.open("POST",url);
					httpobj.setRequestHeader('Pragma', 'no-cache');
					httpobj.setRequestHeader('Cache-Control', 'no-cache');
					httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
					httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					httpobj.send("send_value="+send_value);
					break;
				
				/*変更・削除の処理内容(移動先:frame_Doing)
				※削除かどうかはDBのカテゴリで判断*/
				case "frame_Doing":
				send_value=send_text1+","+send_text2+","+send_text3;
					var url="update_db.php";
					var httpobj =createHttpRequest();
					httpobj.onreadystatechange = function() {
  						if (httpobj.readyState == 4) {
    						alert(httpobj.statusText);
  						}
					};
					httpobj.open("POST",url);
					httpobj.setRequestHeader('Pragma', 'no-cache');
					httpobj.setRequestHeader('Cache-Control', 'no-cache');
					httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
					httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					httpobj.send("send_value="+send_value);
					break;
				
				/*変更の処理内容(移動先:frame_Done)：削除)*/
				case "frame_Done":
				send_value=send_text1+","+send_text2+","+send_text3;
					var url="update_db.php";
					var httpobj =createHttpRequest();
					httpobj.onreadystatechange = function() {
  						if (httpobj.readyState == 4) {
    						alert(httpobj.statusText);
  						}
					};
					httpobj.open("POST",url);
					httpobj.setRequestHeader('Pragma', 'no-cache');
					httpobj.setRequestHeader('Cache-Control', 'no-cache');
					httpobj.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
					httpobj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
					httpobj.send("send_value="+send_value);
				break;
				
				
			}
	}


<!--xmlhttprequestobjの生成-->
function createHttpRequest(){
	try{
			return new XMLHttpRequest();
		}catch(e){}
		try{
			return new ActiveXObject('MSXML2.XMLHTTP.6.0');
		}catch(e){}
		try{
			return new ActiveXObject('MSXML2.XMLHTTP.3.0');
		}catch(e){}
		try{
			return new ActiveXObject('MSXML2.XMLHTTP');
		}catch(e){}
	
		return null;
	}

</script>
EOM
?>
</body>
</html>


「DB処理と出力」

<?php
header('Content-Type: text/html; charset=UTF-8');
$value=$_POST['send_value'];

 $mysqli=new mysqli('localhost','sa','qwertyuiop@1','db_01');
		if($mysqli->connect_error){echo "ＤＢ接続できませーん";}
	$stmt=$mysqli->prepare("SET NAMES utf8");
	$stmt->execute();
	if($value=="実行中タスク")
	$stmt=$mysqli->prepare("select id,name,category,update_time from t_01 where delflg=0 ") or exit("error");
	else{
	$stmt=$mysqli->prepare("select id,name,category,update_time from t_01 where delflg=1 ") or exit("error");
	}
	$stmt->execute();
	$stmt->bind_result($result_id,$result_name,$result_category,$result_time);
header("Content-type: text/xml");
echo'<?xml version="1.0" encoding="utf-8" ?>';
echo '<lists>';
while($stmt->fetch()){
echo '<list>';
echo '<id>'.$result_id.'</id>';
echo '<name>'.$result_name.'</name>';
echo '<category>'.$result_category.'</category>';
echo '<updatetime>'.$result_time.'</updatetime>';
echo '</list>';
}
echo '</lists>';
?>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }