Is it possible to send data using the JavaScript post method without using a form or refreshing the page?

General Discussions
#1

Is it possible to send data using the JavaScript post method without using a form or refreshing the page, using only pure JavaScript (not jQuery’s $.post())? Perhaps with XMLHttpRequest or another method? I’m having trouble finding a solution.

#2

Yes, it is possible to send data using the POST method without using a form or refreshing the page, using pure JavaScript. One way to achieve this is by using the XMLHttpRequest object.

Here’s an example:

var xhr = new XMLHttpRequest();
xhr.open("POST", "your-url-here", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
var data = JSON.stringify({ "key": "value" });
xhr.send(data);

This code snippet creates a new XMLHttpRequest, sets the appropriate headers, and sends the data in JSON format to the specified URL.

#3

Another modern way to send data using the POST method without refreshing the page or using a form is by using the Fetch API, which is simpler and more powerful than XMLHttpRequest.

Here’s how you can use the Fetch API:

fetch("your-url-here", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ "key": "value" })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

This approach leverages the Fetch API to send a POST request with the data as JSON, and it handles the response and any errors in a more modern and readable way.

#4

You can also use asynchronous functions (async/await) with the Fetch API to send data using the POST method without refreshing the page or using a form.

Here’s an example:

async function postData(url = '', data = {}) {
    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    return response.json();
}

postData('your-url-here', { key: 'value' })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

This example demonstrates using an asynchronous function to send a POST request, making the code cleaner and easier to read. The postData function sends the data and handles the response in a straightforward manner.