How to submit serialized data to an API

Earlier this week, we looked at how to serialize form data with the FormData object. Today, we’re going to learn how to submit that data to an API.
Let’s dig in!
A sample form For today’s lesson, let’s again use a simple sample form.
<form id=”post”> <label for=”title”>Title</label> <input type=”text” name=”title” id=”title” value=”Go to the beach”> <label for=”body”>Body</label> <textarea id=”body” name=”body”>Soak up the sun and swim in the ocean.</textarea> <input type=”hidden” name=”userId” value=”1″> <button>Submit</button> </form> Sending data with the window.

Earlier this week, we looked at how to serialize form data with the FormData object. Today, we’re going to learn how to submit that data to an API.

Let’s dig in!

A sample form

For today’s lesson, let’s again use a simple sample form.

<form id="post">

	<label for="title">Title</label>
	<input type="text" name="title" id="title" value="Go to the beach">

	<label for="body">Body</label>
	<textarea id="body" name="body">Soak up the sun and swim in the ocean.</textarea>

	<input type="hidden" name="userId" value="1">

	<button>Submit</button>

</form>

Sending data with the window.fetch() method

One of the options that you can include with the window.fetch() method is body. The body property holds any data you want to send as part of your HTTP (or API) request.

Depending on the endpoint, this data may be sent as a JSON object or a query string. Some APIs allow both types, while some require just one or the other.

API requests are sent with headers that include information about the request.

When sending data with the window.fetch() method, you will need to specify the Content-type as a property of the headers property in the options object. This tells the API if the data you sent is JSON or a query string.

fetch('https://jsonplaceholder.typicode.com/posts', {
	method: 'POST',
	body: '', // The data
	headers: {
		'Content-type': '' // The type of data you're sending
	}
});

Sending data as a JSON object

To send data as a JSON object, use the JSON.stringify() method to convert your data into a string. For your headers['Content-type'], use application/json as the value.

Note: the JSON Placeholder API request that you also specify the charset as UTF-8. Most APIs do not need this.

We’ll use the serialize() helper function to convert our FormData into a plain object.

// Serialize form data into an object
function serialize (data) {
	let obj = {};
	for (let [key, value] of data) {
		if (obj[key] !== undefined) {
			if (!Array.isArray(obj[key])) {
				obj[key] = [obj[key]];
			}
			obj[key].push(value);
		} else {
			obj[key] = value;
		}
	}
	return obj;
}

// Get the form data
let form = document.querySelector('form');
let data = new FormData(form);

// Submit to the API
fetch('https://jsonplaceholder.typicode.com/posts', {
	method: 'POST',
	body: JSON.stringify(serialize(data)),
	headers: {
		'Content-type': 'application/json; charset=UTF-8'
	}
}).then(function (response) {
	if (response.ok) {
		return response.json();
	}
	throw response;
}).then(function (data) {
	console.log(data);
}).catch(function (error) {
	console.warn(error);
});

Here’s a demo.

Sending data as a query string

To send data as a query string, include the query string as the value of the body property. Any properties that may have spaces or special characters in them should be passed into the encodeURIComponent() to encode it.

The new URLSearchParams() can convert our FormData into a search params object for us, and the URLSearchParams.toString() method will turn it into an encoded query string.

For your headers['Content-type'], use application/x-www-form-urlencoded as the value.

// Get the form data
let form = document.querySelector('form');
let data = new FormData(form);

// Submit the form data
fetch('https://jsonplaceholder.typicode.com/posts', {
	method: 'POST',
	body: new URLSearchParams(data).toString(),
	headers: {
		'Content-type': 'application/x-www-form-urlencoded'
	}
}).then(function (response) {
	if (response.ok) {
		return response.json();
	}
	throw response;
}).then(function (data) {
	console.log(data);
}).catch(function (error) {
	console.warn(error);
});

Here’s another demo.


Print Share Comment Cite Upload Translate
APA
Go Make Things | Sciencx (2024-03-28T17:52:04+00:00) » How to submit serialized data to an API. Retrieved from https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/.
MLA
" » How to submit serialized data to an API." Go Make Things | Sciencx - Friday January 29, 2021, https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/
HARVARD
Go Make Things | Sciencx Friday January 29, 2021 » How to submit serialized data to an API., viewed 2024-03-28T17:52:04+00:00,<https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/>
VANCOUVER
Go Make Things | Sciencx - » How to submit serialized data to an API. [Internet]. [Accessed 2024-03-28T17:52:04+00:00]. Available from: https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/
CHICAGO
" » How to submit serialized data to an API." Go Make Things | Sciencx - Accessed 2024-03-28T17:52:04+00:00. https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/
IEEE
" » How to submit serialized data to an API." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/. [Accessed: 2024-03-28T17:52:04+00:00]
rf:citation
» How to submit serialized data to an API | Go Make Things | Sciencx | https://www.scien.cx/2021/01/29/how-to-submit-serialized-data-to-an-api/ | 2024-03-28T17:52:04+00:00
https://github.com/addpipe/simple-recorderjs-demo