<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ESPAsyncWebServer | ばすにっきTips</title>
	<atom:link href="https://takabus.com/tips/tag/espasyncwebserver/feed/" rel="self" type="application/rss+xml" />
	<link>https://takabus.com/tips</link>
	<description>プログラミングやサーバー、日々のTipsをメモしています。</description>
	<lastBuildDate>Fri, 17 Sep 2021 05:53:43 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.3</generator>

<image>
	<url>https://takabus.com/tips/wp-content/uploads/2022/12/cropped-tips-1-32x32.png</url>
	<title>ESPAsyncWebServer | ばすにっきTips</title>
	<link>https://takabus.com/tips</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ESPAsyncWebServerでパラメータを取得するには？</title>
		<link>https://takabus.com/tips/29/</link>
					<comments>https://takabus.com/tips/29/#respond</comments>
		
		<dc:creator><![CDATA[ばすにっきTips]]></dc:creator>
		<pubDate>Fri, 17 Sep 2021 05:46:41 +0000</pubDate>
				<category><![CDATA[ESP32]]></category>
		<category><![CDATA[ESPAsyncWebServer]]></category>
		<guid isPermaLink="false">http://192.168.1.3/~t.h/tips/?p=29</guid>

					<description><![CDATA[ESP32で動作する非同期Webサーバー「ESPAsyncWebServer」をつかって、GET・POSTされたパラメータを取得する方法を紹介します。]]></description>
										<content:encoded><![CDATA[
<p>ESP32で動作する非同期Webサーバー「ESPAsyncWebServer」をつかって、GET・POSTされたパラメータを取得する方法を紹介します。argとgetParamsの違いがわかりにくかったので、整理してみました。</p>



<h2 class="wp-block-heading">クエリパラメータを取得するには？</h2>



<p>クエリパラメータとは、</p>



<p class="has-watery-yellow-background-color has-background"><strong>http://&lt;ESP32のIPアドレス&gt;/api?param=hoge</strong></p>



<p>でいうところの<strong><span class="bold-red">?param=hoge</span></strong>のことです。つまり、URL末尾に含まれるパラメータのことを指します。</p>



<p>ESPAsyncWebServerでクエリパラメータを取得するには、<strong><span class="marker">getParam()</span></strong>を使用します。</p>



<pre class="wp-block-code"><code> server.on("/test", HTTP_GET, &#91;](AsyncWebServerRequest *request) {
      String value=request-&gt;getParam("param")-&gt;value();
      Serial.print(value);
}
</code></pre>



<p><code>http://&lt;ESP32のIPアドレス&gt;/test?param=hoge</code>にアクセスすると、シリアルコンソールにhogeと表示されます。</p>



<p>このサンプルではGETされたときに取得していますが、HTTP_GETをHTTP_ANYにすれば、POSTやPUTといった他のメソッドでも同様に動作させることができます。</p>



<h2 class="wp-block-heading">POSTされたパラメータを取得するには？</h2>



<p>POSTされたパラメータ（<span class="bold-red">formタグにより送信されたパラメータ</span>など）を取得するには、<strong><span class="marker">arg()</span></strong>を使用します。</p>



<pre class="wp-block-code"><code> server.on("/test", HTTP_ANY, &#91;](AsyncWebServerRequest *request) {
      String value=request-&gt;arg("param");
      print(value);
}</code></pre>



<p>/testにデータがPOSTされると、paramの値を取得して、シリアルポートに出力します。</p>



<p>arg()は、application/x-www-form-urlencodedとmultipart/form-dataの両者に対応します。<strong><span class="marker-under">つまり、&lt;form&gt;タグで作成したフォームのデータでも、javascriptのFormDataオブジェクトでも解釈することができます。</span></strong></p>




<a rel="noopener" href="https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST" title="POST - HTTP | MDN" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">POST - HTTP | MDN</div><div class="blogcard-snippet external-blogcard-snippet">HTTP の POST メソッドは、サーバーにデータを送信します。リクエストの本文の型は Content-Type ヘッダーで示されます。</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Methods/POST" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">developer.mozilla.org</div></div></div></div></a>



<div class="wp-block-cocoon-blocks-icon-box alert-box common-icon-box block-box">
<p><strong>getParamはクエリパラメータを取得するための関数！</strong></p>



<p>公式のGitHubには、POSTされたパラメータを取得する関数としてgetParams()が紹介されています。</p>



<p><span class="marker-under"><span class="bold-red">しかし、</span></span><span class="marker-under"><span class="bold-red">この方法</span></span><span class="marker-under"><span class="bold-red">でPOSTされたデータを取得することは、基本的にできません。</span></span></p>



<p>getParamsは、<strong>クエリパラメータの取得</strong>に使用される関数です。</p>



<p>クエリパラメータとは、</p>



<p class="has-watery-yellow-background-color has-background"><strong>http://&lt;ESP32のIPアドレス&gt;/api?param=hoge</strong></p>



<p>でいうところの<strong>?param=hoge</strong>のこと。つまり、URLに含まれるパラメータを取得するための関数です。</p>



<p><span class="bold-red">getParam()でformタグやFormDataから送信されたボディパラメータを取得することはできません</span>ので、注意してください。ボディパラメータをgetParam()で取得しようとすると、以下のような例外が発生し、ESP32がリセット（再起動）されてしまいます。</p>



<pre class="wp-block-code"><code>Guru Meditation Error: Core  1 panic'ed (LoadProhibited). Exception was unhandled.
Core 1 register dump:
PC      : 0x40151d6b  PS      : 0x00060a30  A0      : 0x800d6d03  A1      : 0x3ffd0c50
A2      : 0x0000000c  A3      : 0x3ffd0cb8  A4      : 0x00000001  A5      : 0x00000003
A6      : 0x00ff0000  A7      : 0xff000000  A8      : 0x800d6a17  A9      : 0x3ffd0c30
A10     : 0x3ffd0cb8  A11     : 0x3ffd0cb8  A12     : 0x3ffd14e8  A13     : 0x0000ff00
A14     : 0x00ff0000  A15     : 0xff000000  SAR     : 0x00000010  EXCCAUSE: 0x0000001c
EXCVADDR: 0x00000014  LBEG    : 0x400012e5  LEND    : 0x40001309  LCOUNT  : 0x800d6f47

ELF file SHA256: 0000000000000000

Backtrace: 0x40151d6b:0x3ffd0c50 0x400d6d00:0x3ffd0c70 0x400d0f13:0x3ffd0c90 0x400d5871:0x3ffd0d00 0x400d4739:0x3ffd0d40 0x400d47c1:0x3ffd0d90 0x401489c1:0x3ffd0db0 0x40148a3d:0x3ffd0df0 0x401490ee:0x3ffd0e10 0x4008996a:0x3ffd0e40</code></pre>
</div>



<h2 class="wp-block-heading">まとめ</h2>



<p>ESPAsyncWebServerをつかって、リクエストされたパラメーターを取得する方法を紹介しました。</p>



<p>argとgetParamsの違いがわかりにくいので、注意が必要です。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://takabus.com/tips/29/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
