DeveloperBreeze

Ajax Tutorial Development Tutorials, Guides & Insights

Unlock 1+ expert-curated ajax tutorial tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your ajax tutorial skills on DeveloperBreeze.

AJAX with JavaScript: A Practical Guide

Tutorial September 18, 2024
javascript

In many real-world applications, you'll need to send data to the server using POST requests. Here's how to send form data using the Fetch API.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST Request with Fetch</title>
</head>
<body>
    <form id="postDataForm">
        <input type="text" id="title" placeholder="Enter title" required>
        <input type="text" id="body" placeholder="Enter body" required>
        <button type="submit">Submit</button>
    </form>
    <div id="postDataOutput"></div>

    <script>
        document.getElementById('postDataForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const title = document.getElementById('title').value;
            const body = document.getElementById('body').value;

            fetch('https://jsonplaceholder.typicode.com/posts', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    title: title,
                    body: body
                })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('postDataOutput').innerHTML = `
                    <h3>Data Submitted:</h3>
                    <p>Title: ${data.title}</p>
                    <p>Body: ${data.body}</p>
                `;
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

Read More