Application x-www-form-urlencoded khác multipart form-data chỗ nào

Vậy làm sao để chạy nó ta? đó là dùng các công cụ REST client như PostMan (Chrome), HTTP Requester (Firefox), WCF client Test (Microsoft). Lưu ý các công cụ này ta vẫn Debug được NodeJS một cách trực tiếp trong Visual nha (xem lại bài này để biết cách Debug->Kéo xuống cuối bài hướng dẫn sẽ thấy).

OK, bây giờ Thím mở PostMan lên:

Mục 2: Nhập URI http://localhost:1337/addProduct

Mục 3: Chọn body và checked vào x-www-form-urlencoded

Mục 4: Nhập các Parameter trong body cho API. Lưu ý nhập chính xác tên biến khớp tới Cột trong bảng CSDL nha. Tui chụp hình dưới đây để các bạn hiểu về sự so khớp từ Client -> API

Mục 5: Bấm SEND

Mục 6: Kết quả cho biết là true hay false (true thành công, false thất bại.

Bây giờ ta có thể chạy lại API http://localhost:1337/products để xem được kết quả có thêm thành công hay chưa:

Như vậy các bạn đã biết cách viết HTTPPOST để lưu một Product vào cơ sở dữ liệu MongoDB như thế nào rồi nha.

Lưu ý muốn Debug để gỡ lỗi từng bước thì xem lại bài 23, kéo xuống dưới cùng có hướng dẫn

Source code HTTPPOST Thêm mới Product tải ở đây.

Bài sau Tui sẽ hướng dẫn các Thím cách viết HTTPPUT để chỉnh sửa dữ liệu, và sau đó là HTTPDELETE. Các bạn chú ý theo dõi nhé

If you need file uploads, form-data is your only option here. Otherwise, they serve the same job. form-data is a fancier way of encoding data than x-www-form-urlencoded. You can think of x-www-form-urlencoded as .txt file and form-data as .html file. In the end of day they both deliver some http payload.

Try 🏀 getd.io playground links 🏀 below to see what the headers and body look like:

• Send a request with x-www-form-urlencoded
• Send a request with form-data

Content Type

content-type x-www-form-urlencoded

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

0 form-data

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

1

A quick note for form-data: Usually the browser generates a random

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

3, e.g.,

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

4, but you can specify your own if you want. See below for examples.

Request Payload

Let's say you have a login form with fields below:

Fields Values username techbos password Pa$$w0rd

When you post the form, the payload for x-www-form-urlencoded looks like below. Note how strings are

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

6'd.

username=techbos&password=Pa%24%24w0rd

For form-data, each (key, value) pair is encoded in its own section, with

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

3 as separator. Here I also included a sample section in the end to show you what a file upload looks like:

--{boundary string}
Content-Disposition: form-data; name="username",
techbos
--{boundary string}
Content-Disposition: form-data; name="password",
Pa$$w0rd
--{boundary string}
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg,
--{boundary string}--

Explained inline:

API to send request

API to handle response

For x-www-form-urlencoded, use bodyParser, which will parse payload into

express.use(bodyParser.urlencoded({ extended: true }));
express.post('/my-form-endpoint', (req, res) => {
  console.log(req.body.username); // print 'techbos'
});

0 in the format of

express.use(bodyParser.urlencoded({ extended: true }));
express.post('/my-form-endpoint', (req, res) => {
  console.log(req.body.username); // print 'techbos'
});

express.use(bodyParser.urlencoded({ extended: true }));
express.post('/my-form-endpoint', (req, res) => {
  console.log(req.body.username); // print 'techbos'
});

Same functionality also comes built-in with .

For parsing form-data, you can use packages such as busboy or formidable. See their doc for how-to.

What's your favorite library for sending / handling forms? Leave a comment below to share your experience ❤️❤️❤️!