Pass JS POST request data as body parameters

Question

Pass JS POST request data as body parameters

Is there a way to send a parameter as the post body to an API while also including the required Authorization header with the API key?

How can I include a post body request with data set as "server_id: 12345"?
What is the method to display the JSON response from the API on my webpage?

document.getElementById("1").addEventListener("click", PowerOff);
function PowerOff() {
  "";

  console.log("Doing");

  fetch(url, {
    method: "POST",
    headers: {
      Authorization: "CrocodileZebraGiraffe",
      "Content-Type": "application/json",
    }
  });
}

javascript json post

Answer 1

Answer №1

Ensure your body data type aligns with the "Content-Type" header to receive the expected json response. Follow the standard then method for processing the data.

var data = {server_id: 12345} //can be created within the function if it remains constant
function PowerOff() {
  "";

  console.log("Executing");

  fetch(url, {
    method: "POST",
    headers: {
      Authorization: "CrocodileZebraGiraffe",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data)
  }).then(response=>{
    console.log('Success: ', response);
    //if you need to store this response for later use, assign it to a variable
  }).catch(err => {
    console.log('Error: ', err)
  });
}

Answer 2

Ensure your body data type aligns with the "Content-Type" header to receive the expected json response. Follow the standard then method for processing the data.

var data = {server_id: 12345} //can be created within the function if it remains constant
function PowerOff() {
  "";

  console.log("Executing");

  fetch(url, {
    method: "POST",
    headers: {
      Authorization: "CrocodileZebraGiraffe",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data)
  }).then(response=>{
    console.log('Success: ', response);
    //if you need to store this response for later use, assign it to a variable
  }).catch(err => {
    console.log('Error: ', err)
  });
}

Answer 3

Answer №2

To enhance your API request, consider adding a new custom property named body and assigning it any desired data in the form of a stringified object:

const payload = {user_id: "67890"};
fetch(serverUrl, {
  method: "POST",
  headers: {
    Authorization: "LionElephantTiger",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(payload)
}).then((response)=> {
   // Process the response as needed
});

Answer 4

To enhance your API request, consider adding a new custom property named body and assigning it any desired data in the form of a stringified object:

const payload = {user_id: "67890"};
fetch(serverUrl, {
  method: "POST",
  headers: {
    Authorization: "LionElephantTiger",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(payload)
}).then((response)=> {
   // Process the response as needed
});

Pass JS POST request data as body parameters

Answer №1

Answer №2

Similar questions

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Converting PHP XML to JSON while retaining individual Tag Elements

"Utilizing jQuery to apply a class based on the attributes of CSS

Having trouble retrieving IDs in a Many-to-Many relationship with Django 2.0.2

What is the best way to transform a string response into properly formatted JSON data?

The local database is not receiving any values

What is the Best Way to Enable Tooltips to Function from External Elements?

Tips for converting Form Input field data into JSON Format with Jquery Ajax

Accessing variables from outside the query block in Node.js with SQLite

When making an XMLHTTPRequest, Chrome often responds with an "Aw, snap"

What is the process of implementing session storage in an AngularJS directive?

A guide on implementing listings in React Native through the use of loops

What is the best way to showcase information from an external API in react js?

Tips for updating form values with changing form control names

Mobile devices do not support internal link scrolling in Material UI

Change JSON data into a text format

How to Use Conditional In-Line CSS for Internet Explorer and Other Browsers

Adding Elements in Real-Time to a jQuery Mobile ListView

I am unable to log in using bcryptjs, but I have successfully been able to register a

Utilize ES6 to import components for rendering on the server-side