HTMLフォームの覚書

Pocket

Content Typeを中心に忘れやすいことをメモとして残します。

Content-Type

<form action="form.php" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="foo">
    <input type="submit" name="send" value="送信">
</form>

フォームの送信でenctypeへ指定した値がHTTP RequestのContent-Typeヘッダーへ設定されます。
ecntypeを省略したときはapplication/x-www-form-urlencodedになります。

x-www-form-urlencodedのxは通常正式に規格化される前に付くプレフィックスですが互換性に配慮して正式に規格化されたあとも残っています。

HTTP Requestヘッダー
Content-Type Content-Type:application/x-www-form-urlencoded
<form action="form.php" method="POST" enctype="multipart/form-data">
    <input type="text" name="foo">
    <input type="file" name="file">
    <input type="submit" name="send" value="送信">
</form>
HTTP Requestヘッダー
Content-Type Content-Type:multipart/form-data; boundary=—-WebKitFormBoundary7Nvz4MD7AM8vdY8U

リクエストボディー部がboundary=—-WebKitFormBoundary7Nvz4MD7AM8vdY8Uで区切られます。

Ajax

$ajaxでPOST送信するときボディー部のデータ形式は主に2つあります。

データ形式 Content-Typeヘッダー
JSON application/json
URLエンコード application/x-www-form-urlencoded

上記データ形式に応じHTTP RequestヘッダーのContent-Typeを設定すべきです。
$.ajax関数のデフォルトはContent-Typeを明示的に設定しません。
conctentTypeプロパティで明示的に指定することを推奨します。

ちなみにdataTypeプロパティは受信(HTTP Response)形式を指定します。

JSONの例

$.ajax({
    url: '',
    type: 'post',
    contentType:'application/json',
    dataType: 'json',  // text、html、xmlなど
    data: JSON.stringify(data)
});

[jQuery] $.ajaxで Content-Typeを指定する

application/x-www-form-urlencodedの例

$.ajax({
    url: '',
    type: 'post',
    contentType:'application/x-www-form-urlencoded',
    dataType: 'json',  // text、html、xmlなど
    data: getUrlEncode(data)
});

getUrlEncodeはデータをURLエンコードする関数とします。

詳細は下記リンクを参照ください。
XMLHttpRequestによるPOSTメソッド | JavaScript プログラミング解説

JavaScriptはencodeURIComponentでURLエンコードするのが一般的です。
そのとき空白が%20へ変換されるので上記記事ではencodeURIComponentを適用したあと%20を+へ変換しています。

人気記事 はてなブックマーク

この日記のはてなブックマーク数