# Django와 HTMX로 동적 웹 개발을 단순화하기 (4편) : payload는 어떻게?
기존 자바스크립트의 `fetch`를 이용한 Ajax 요청에서는 POST 요청을 보낼 때, 보통 `JSON.stringify()`를 이용해 페이로드(payload)를 직접 조립해서 보냅니다.
대략 이런 감각이죠.
```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으로 변환해 바디(body)에 넣습니다. 반면 **HTMX는 기본적으로 DOM에 있는 값들을 수집해서 전송**합니다.
HTMX의 사고방식은 "JS 객체를 직접 조립하는 것"이 아니라, **"HTML 요소에서 값들을 모아 요청 파라미터를 만드는 것"**에 가깝습니다. 이를 위해 보통 다음 3가지 방식을 사용합니다.
### 1) Form 기반으로 값 모아서 보내기 {#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) Form 없이 다른 요소의 값 포함하기: `hx-include` {#sec-a2c0e1f9e1ca}
버튼 하나에 `hx-post`를 달면서, 멀리 떨어져 있는 입력값만 골라 같이 보내고 싶을 때 사용합니다.
```HTML
```
`hx-include`는 지정한 요소들의 값을 요청에 포함시킵니다. 굳이 전체를 `