DeveloperBreeze

POST Request with Fetch API and JSON Data


const apiUrl = 'https://api.example.com/data';
const requestData = {
    name: 'John Doe',
    age: 30,
};

// Send a POST request using fetch
fetch(apiUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json', // Specify JSON content type
    },
    body: JSON.stringify(requestData), // Convert data to JSON string
})
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data); // Handle successful response
    })
    .catch(error => {
        console.error('Error:', error); // Handle errors
    });

Related Posts

More content you might like

Tutorial
javascript

JavaScript in Modern Web Development

JavaScript is the engine behind the dynamic behavior of modern websites. It works alongside HTML (structure) and CSS (style) to create a complete web experience.

  • JavaScript enables features like dropdown menus, modal windows, sliders, and real-time updates.
  • Examples: Search suggestions, form validations, chat applications.

Dec 10, 2024
Read More
Code
javascript

Dynamic and Responsive DataTable with Server-Side Processing and Custom Styling

  • responsive: true makes the table adapt to different screen sizes.
  • serverSide: true enables server-side pagination, sorting, and filtering.
  • processing: true displays a processing indicator while fetching data.

Oct 24, 2024
Read More
Tutorial
php

Handling HTTP Requests and Raw Responses in Laravel

  • Http::withHeaders(): Adds custom headers, such as an API key, to the request.

When working with OAuth or JWT-based APIs, you may need to pass a Bearer Token for authentication.

Oct 24, 2024
Read More
Article
javascript

20 Useful Node.js tips to improve your Node.js development skills:

These Node.js tips will help you write more robust, secure, and efficient Node.js applications and improve your development workflow.

Oct 24, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!