# DjangoとHTMXで動的Web開発をシンプルに(第4回):ペイロードはどのように送る? 従来のJavaScriptの`fetch`を使ったAjaxリクエストでは、POSTリクエストを送信する際、通常`JSON.stringify()`を使ってペイロードを直接組み立てて送ります。 おおよそこのようなイメージです。 ```JavaScript fetch("/api/todos/", { method: "POST", headers: { "Content-Type": "application/json", "X-CSRFToken": csrftoken }, body: JSON.stringify({ title: "買い物", done: false, priority: 3 }) }) ``` では、**[[HTMX]]**ではどうでしょうか?一体`hx-post`はどのような方法でデータをサーバーに送信するのでしょうか?多くの例がごくシンプルな機能しか示していないため、複雑なペイロードを作成して送信する実践的な例を見つけるのは意外と困難です。 今回の記事では、HTMXにおけるデータ送信方法と、サーバーでそれを処理する方法を完全にまとめます。  ------ ## HTMXのデータ送信方法 {#sec-1f930b1a0dad} **`fetch`のペイロード感覚と`hx-post`のデータ送信方法はかなり異なります。** `fetch`では、開発者が直接オブジェクトを作成し、JSONに変換してボディに格納します。一方、**HTMXは基本的にDOMにある値を収集して送信します。** [[HTMX]]の考え方は、「JSオブジェクトを直接組み立てる」のではなく、**「HTML要素から値を集めてリクエストパラメータを作成する」**ことに近いです。通常、これには以下の3つの方法を使用します。 ### 1) フォームベースで値を集めて送信する {#sec-f5086851ac19} 最もHTMLらしく、Djangoにもよく合う方法です。 ```html
``` この場合、[[HTMX]]はフォーム内の入力値を収集し、リクエストに含めて送信します。デフォルトのエンコーディングは、通常のフォーム送信と同じ**URL-encoded form data**方式です。 Djangoビューでは、普段通りに次のように受け取ることができます。 ```Python def create_todo(request): title = request.POST.get("title") priority = request.POST.get("priority") done = request.POST.get("done") ``` ### 2) フォームを使わず他の要素の値を含める:`hx-include` {#sec-a2c0e1f9e1ca} ボタン一つに`hx-post`を付け、離れた場所にある特定の入力値だけを一緒に送りたい場合に使用します。 ```HTML ``` `hx-include`は指定した要素の値をリクエストに含めます。わざわざ全体を`