my開発メモ

JavaScriptでサーバーのPHPにPOSTデータを送り結果を受け取る

JavaScriptでサーバーのPHPにPOSTデータを送り、処理させて結果を受け取る

formでPOSTデータを送ると、画面遷移がおこってしまい、困ることがある。

JavaScriptでPOSTデータを取得し、サーバのPHPに送信して、その結果を受け取ることができれば、画面遷移が起こらなくなる。

受け取る側のPHPは以下のようなものとする。

test_js.php

<?php
error_reporting(0);
mb_language("ja");
mb_internal_encoding('UTF-8');

$name = $_POST['name'];
$hobby = $_POST['hobby'];
print "{$name}の趣味は、{$hobby}です。";

フォームでは、名前と趣味という２つの項目の入力を求めている。

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>TEST</title>
        <style>
         #textareas {
             width: 80%;
             margin: 0 auto;
             height: 160px;
         }
        </style>
    </head>
    <body>
        <h1>TITLE</h1>
        <form>
	    <p>名前：<input type="text" name="name" id="name"></p>
	    <p>趣味：<input type="text" name="hobby" id="hobby"></p>
	    <p><button type="button" name="botan" id="button01"
	               onClick="sendRequest();">ボタン</button></p>
            <textarea id="textareas" wrap="off"></textarea>
        </form>
	<script src="send.js"></script>
    </body>
</html>

以下が、POSTデータを取得し、test_js.phpにデータを送り、その結果を表示するスクリプトである。

IE6以前のブラウザへの対応も一応書いておいた。

send.js

// IE6以前を考慮する場合
function createXmlHttpRequest() {
  var xmlhttp = null;

  // IE6以前向け
  if (window.ActiveXObject) {
    try {
      // for IE6
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e2) {
      // for ID5,IE5.5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
return xmlhttp;
}
function sendRequest() {
  var name = document.getElementById('name').value;
  var hobby = document.getElementById('hobby').value;

  // var xmlhttp = createXmlHttpRequest();  // for 〜IE6
  var xmlhttp = new XMLHttpRequest();

  if (xmlhttp !== null) {
    xmlhttp.open("POST", "./test_js.php", false);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var data = "name=" + name + "&hobby=" + hobby;
    xmlhttp.send(data);
    var res = xmlhttp.responseText;
    document.getElementById("textareas").value = res;
  }
}

XHR2(XMLHttpRequest2)の場合

さて、XHR2において、多くの拡張があったが、sendメソッドにおいても、”xxx=yyy&zzz=www”という形式以外にも FormDataオブジェクトなど、多くのデータ形式に対応できることになった。

以下がその例である。（IE6以前への対応は考慮しないとする）

send2.js

// XHR2(XMLHttpRequest2)の場合
function sendRequest() {
  var name = document.getElementById('name').value;
  var hobby = document.getElementById('hobby').value;

  var data = new FormData();
  data.append("name", name);
  data.append("hobby", hobby);

  var xmlhttp = new XMLHttpRequest();

  if (xmlhttp !== null) {
    xmlhttp.open("POST", "./test_js.php", false);
    xmlhttp.send(data);
    var res = xmlhttp.responseText;
    document.getElementById("textareas").value = res;
  }
}

FormDataでは、以下のような形式でPHPにPOSTする必要がなくなった。

var data = "name=" + name + "&hobby=" + hobby;

FormDataオブジェクトを使うと、以下の記述は、必要なくなる。

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

「fetch」を使う

上記記事を書いたのは、実は2019年1月15日だった。
それから月日が経ったので、現在では、
非同期通信をおこなうには、現在では「fetch」が推奨されているらしい。

上記、send2.js を fetch を使って書いてみた。

send3.js

function sendRequest() {
  var name = document.getElementById('name').value;
  var hobby = document.getElementById('hobby').value;

  var data = new FormData();
  data.append("name", name);
  data.append("hobby", hobby);

  fetch("/test_js.php", {
    method: "POST",
    body: data
  }).then(response => response.text())
    .then(text => {
      document.getElementById("textareas").value = text;
  })
}

参考

JavaScriptでサーバーにあるphpを実行させて結果を受け取る方法

==>上記コードは、このページのコードをほとんどそのまま使っている。

カテゴリー: JavaScript, memo

タグ: ajax, xmlhttp, xmlhttprequest

カウント: 191