#スタックチャン制御用WEBページを再読込させない方法 #M5Stack #電子工作 #ESP32
スタックチャンやESP32・M5Stack をWEBページを使ってコントロールするときに、ボタンを押すと、フォーム画面が再読み見込み・リロードされてしまう問題があった。
WEBを猛烈に検索をして、やっとこれを解決できた。その方法は、Form を Submit する際に、
「 JavaScript の fetch でフォームを POST する」
以上 ✨️
元ネタは、この「【JavaScript】画面遷移させないでformをsubmitさせる」の情報。ただ、このページだけでは実現できないので、不足分を説明する。
基本は、Form のボタンを押したときに、直接 Submit しないで、JavaScript の関数から POST して、その戻り値として Form に false を返すことによって、再読込がされなくなる。
具体的には、関数例として以下の JavaScript の関数を作る。
function formSubmit(formId){
const form = document.getElementById(formId);
const arg = [form.action];
if( form.method === undefined || form.method.toUpperCase() === "POST")
arg.push({method:"POST",body:new FormData(form)} );
return fetch( ...arg ).then( response =>
response.status === 200 ? response.text() : Promise.reject(response.status)
);
};
引数の formId は、ボタンなどを配置してある Form の id 名。これを含めた Form タグの中の記述は、こんな感じになる。
<form id="form" action="/test" onsubmit="formSubmit(this.id); return false" method="POST">
onsubmit の記述が、キモ。formSubmit( ) の後に、必ず return false が必要。これがないと、フォームがリロードされてしまう。そして、
「転送方式は POST を使う事」
これ、GETでもできるはずなんだけど、結局やり方が分からなかった。実は、ESP32・M5Stack の Webserver は、POST も GET も同じ方法でパラメータを取得することができる。これらを区別しないで、プログラムが書けてしまう。
ここで POST と書いてあっても、ブラウザの URL の所に GET 形式のURLを打ち込んでも、ちゃんと動かすことができる。ただし、自分で POST と GET を区別したコードを書いていなければ、の話し。
注：この JavaScript の内容はほとんど理解できていないので、上記の通りに submit に POST を使って、form の onsubmit に記述することをお勧めします 💦
追記：以下のサイトが、さらに、参考になる。
・『Fetch API fetch() の使い方』← かなり詳しい
・『【JS】formのsubmit時にページ遷移させない方法』← 少し分かり易い
これで、フォーム画面をリロードしないページが書けるんだけど、実は、もう一つ、問題がある。それは、button などの名前を name="button" と同じにして、値を value="power" の用に書いて区別しているとき。
実は、この方法で複数のボタンを記述していると、フォームデータの中に button=power が送られないという問題が起きてしまう。
この解決策も調べてあるんだけど、記事が長くなるので、それは、別記事で。まぁ、この情報が必要な人も少ないだろうし。
