JavaScript function trying to send a POST request to API

Question

JavaScript function trying to send a POST request to API

I'm encountering an issue when attempting to execute an API GET request using JavaScript's built-in XMLHttpRequest function. I'm perplexed by why this functionality is failing to operate properly.

function getStats(username){
  const request = new XMLHttpRequest;
  var url = "https://pitpanda.rocks/api/players/" + username;
  request.open("GET", url);
  request.send();
  request.onload = (e) => {
    return request.response;
  }
}

The code I've written is currently live on CodePen at https://codepen.io/casperqf/pen/NWXGeqa

javascript json

Answer 1

Answer №1

If you're looking for a recommendation, I would suggest utilizing the fetch function. It provides flexibility in setting methods and other parameters.

What fetch can do that XHR cannot: It allows interaction with request and response objects from APIs. You can make requests with the `no-cors` mode, receiving responses from servers without CORS implementation. However, accessing the response body directly from JavaScript is not permitted.

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
    body: JSON.stringify(data)
  });
  return response.json();
}

function updateStats(username, stats){
  postData('https://pitpanda.rocks/api/players/' + username, { stats: stats })
  .then(data => {
    console.log(data);
  });
}

updateStats('otik', 123);

Answer 2

If you're looking for a recommendation, I would suggest utilizing the fetch function. It provides flexibility in setting methods and other parameters.

What fetch can do that XHR cannot: It allows interaction with request and response objects from APIs. You can make requests with the `no-cors` mode, receiving responses from servers without CORS implementation. However, accessing the response body directly from JavaScript is not permitted.

async function postData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow',
    referrerPolicy: 'no-referrer',
    body: JSON.stringify(data)
  });
  return response.json();
}

function updateStats(username, stats){
  postData('https://pitpanda.rocks/api/players/' + username, { stats: stats })
  .then(data => {
    console.log(data);
  });
}

updateStats('otik', 123);

JavaScript function trying to send a POST request to API

Answer №1

Similar questions

Creating a reusable anonymous self-invoking function

Avoid the ability for individuals to interact with the icon embedded within a button

Tips for converting JSON data into a C# object with dynamically generated properties

Exploring the concepts of function referencing and prototypical inheritance in relation to function scopes

Accessing the selected list item from an unordered list in Vue.js

Is there a specific plugin that enables dynamic calculations within a django formset?

Using NSJSONSerialization with an integer value

Prevent event bubbling when clicking

A guide on how to implement the closing functionality of a CSS menu when clicking outside the menu using

A guide to showcasing JSON data on a webpage using JavaScript

SailsJS - handling blueprint routes prior to configuration of routes

Import a fixed JSON document in Webpack

Configuring select options using API data

Changing the key name for each element in an array using ng-repeat: a guide

Exploring the World of Metaprogramming with AngularJS Filters

Every time I attempt to execute mupx deploy, an error message appears

Looking to prevent editing on a paragraph tag within CKEditor? Simply add contentEditable=false to the

What is the reason that the 400 status code consistently causes the enter catch block to execute when using axios?

Automatically forward to m.example.com on mobile devices using nodejs

The issue of flickering during the combination of slideToggle and animate in jQuery