はじめに
javascriptでPHPの変数を受け取る のは、意外と簡単です。以下を参照してください。
PHPとjavascriptの連携、PHPの変数を別ファイルのjavascriptで受け取る方法
今回は、javascriptの変数をformを使わずにPOST送信し、 PHPで処理したものを表示する方法について紹介します。
以下はデモページです。
HTML
まずはPHPファイルを準備し、以下のHTMLを記述する。
<img src="画像のURL">
<button>click</button>【Javascript】formを使わずにPOST送信
先ほどのHTMLの下に以下のjavascriptを記述します。
3行目 : JSONに変換する。
10行目 : PHPファイル1枚で完結するので空欄に。
const img = document.querySelector("img");
const button = document.querySelector("button");
const imgData = JSON.stringify(img.src);
window.onload = function() {
// クリックイベントを登録
button.onclick = (e) => {
// form を動的に生成
var form = document.createElement('form');
form.action = '';
form.method = 'POST';
// body に追加
document.body.append(form);
// formdta イベントに関数を登録(submit する直前に発火)
form.addEventListener('formdata', (e) => {
var fd = e.formData;
// データをセット
fd.set('url', imgData);
});
// submit
form.submit();
};
}; PHP
2行目 : POST送信されたものを変数へ
3行目 : JSONファイルをデコードする。
if(isset($_POST["url"])){
$data = $_POST["url"];
$imgData = json_decode($data);
echo ''.'画像URLは "' . $imgData . ' "です。'.'' ;
}まとめ
- javascriptの変数をJSONに変換する。
- javascriptでformを作成し、変数(JSON形式)をセットする。
- PHPで処理をし、echoで結果を表示させる。
