HTMLフォームの覚書

Tweet

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は通常正式に規格化される前に付くプレフィックスですが互換性に配慮して正式に規格化されたあとも残っています。

<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>

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

Ajax

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

上記データ形式に応じ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を+へ変換しています。