趣味探しブログ「研究しましょう」 --- 日記 マガジン

    やりたい趣味を探してネットをさまよう私の、ブログです --- I'm here. Find me out.
0

#スタックチャン制御用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 が送られないという問題が起きてしまう。

この解決策も調べてあるんだけど、記事が長くなるので、それは、別記事で。まぁ、この情報が必要な人も少ないだろうし。

該当の記事は見つかりませんでした。

Leave a reply






管理者にだけ表示を許可する