05: Sending Data - HTTP Tutorials

Two Ways to Send Data

HTTP provides two main ways to send data to servers:

Method	Where Data Goes	Best For
URL (GET)	Query string in URL	Simple requests, searches, filters
Body (POST)	Request body	Form submissions, creating/updating data

Query Strings (GET Data)

GET requests send data in the URL's query string, following a ?:

Query String Format

Starts with ? after the path
Key-value pairs separated by &
Keys and values joined by =
Special characters must be URL-encoded

URL Encoding

Characters that have special meaning in URLs must be encoded using percent-encoding:

Character	Encoded	Reason
Space	%20 or +	Delimiter in URLs
&	%26	Parameter separator
=	%3D	Key-value separator
?	%3F	Query string start
/	%2F	Path separator
#	%23	Fragment identifier
+	%2B	Often means space

Examples

Searching for "C++ programming":

/search?q=C%2B%2B+programming

Email address as parameter:

/user?email=alice%40example.com

Form URL Encoded (POST)

The default format for HTML form submissions. Data is encoded the same way as query strings but sent in the request body:

When to Use

Traditional HTML form submissions
Simple key-value data
When you need broad server compatibility

Limitations

Cannot send files (use multipart)
Flat structure only (no nested objects)
Verbose for complex data (use JSON)

HTML Form Example

<form action="/login" method="POST"> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">Login</button> </form>

The browser automatically encodes and sends this as application/x-www-form-urlencoded.

JSON (POST)

Modern APIs typically accept JSON data, which supports complex nested structures:

Advantages

Supports nested objects and arrays
Type preservation (numbers, booleans, null)
Human-readable and widely supported
Native to JavaScript

When to Use

REST APIs and modern web services
Complex structured data
When working with JavaScript frontends

JavaScript Example

fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Alice Johnson', email: 'alice@example.com', roles: ['admin', 'developer'] }) });

Multipart Form Data

Used for file uploads and forms with binary data. Each field is sent as a separate "part" with its own headers:

Key Concepts

Boundary: A unique string separating each part (must not appear in the data)
Content-Disposition: Names the field and optionally the filename
Content-Type: (For files) The MIME type of the file
Final boundary ends with --

When to Use

File uploads
Forms mixing files and text
Large binary data

HTML Form Example

<form action="/upload" method="POST" enctype="multipart/form-data"> <input type="text" name="title"> <input type="file" name="document"> <button type="submit">Upload</button> </form>

The enctype="multipart/form-data" attribute is required for file uploads.

Comparing Content Types

Format	Content-Type	Use Case	Files?
Query String	N/A (in URL)	GET parameters, simple searches	No
Form Encoded	application/x-www-form-urlencoded	Simple forms, legacy systems	No
JSON	application/json	APIs, complex structured data	Base64 only
Multipart	multipart/form-data	File uploads, mixed content	Yes

GET vs POST: When to Use Each

Use GET When:

Retrieving data without side effects
The request should be bookmarkable
The request should be cacheable
Parameters are non-sensitive and small
Building search or filter functionality

Use POST When:

Creating or modifying server data
Sending sensitive information
Sending large amounts of data
Uploading files
The action shouldn't be repeated accidentally

Interactive Examples

The following examples demonstrate different ways to send data to servers.

GET with Query String

Search with multiple parameters:

POST Form URL Encoded

Traditional login form submission:

POST JSON

Creating a user via API:

POST Multipart (File Upload)

Uploading a file with metadata:

PUT JSON Update

Updating an existing resource:

URL Encoding Edge Cases

Special characters in search query: