techa1008

ROCKET NOTE

2018.07.04

JavaScriptからPHPに非同期で値を渡して返り値を受け取る

JavaScriptのXMLHttpRequest オブジェクトを利用すれば、PHPに非同期(つまりページ遷移をしない)で値を渡すことでき、この時、送信先のPHPで値を出力すれば、それを返り値としてJavaScriptで受け取ることができます。

たとえば、

SELECT ALL

<form name="hoge" id="hoge">
	<input type="text" name="fuga" id="fuga" value="">
</form>
<button onclick="send_data();">データを送信する</button>
<script>

// データを送信する
function send_data(){

	// XMLHttpRequest オブジェクトを作成
	var XHR = new XMLHttpRequest();

	// form 要素にアクセス
	var target_form = document.getElementById('hoge');

	// FormData オブジェクトを作成し、form 要素を紐づける
	var FD  = new FormData(target_form);

	// 送信完了時
	XHR.addEventListener('load', function(event){
		console.log('送信完了');
	});

	// ネットワークエラー時
	XHR.addEventListener("error", function(event){
		console.log('ネットワークエラー');
	});

	// リクエストをセットアップ
	XHR.open('POST', './test.php', true);

	// 送信
	XHR.send(FD);

	// 返り値をチェック
	XHR.onreadystatechange = function(){
		if ((XHR.readyState == 4) && (XHR.status == 200)) {
			console.log(XHR.responseText);
		}
	};

}

</script>

で値を送って、OKだった場合にその旨を返すには、


echo 'OK';

のようにすればOK。

ここで、渡した値をそのまま返り値として利用する場合に、


echo $_POST['fuga'];

文字コードはUTF-8で問題ないはずなのに.responseTextが文字化けすることがありましたが、php.iniのmbstring.encoding_translationをOffにすることで解消しました。