Попытка отправить запрос POST в API с помощью функции JavaScript

Я пытаюсь сделать запрос на получение API, используя JS, встроенную в систему XMLHttpRequest. Я не уверен, почему эта функция не работает.

function updateStats(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;
  }
}

Мой код сейчас работает на CodePen https://codepen.io/casperqf/pen/NWXGeqa

request.open("GET", url); отправляет GET, а не POST.

— 17.03.2022 18:18

Что в нем "не работает"? Сейчас самое время начать использовать инструменты отладки вашего браузера. Ошибки в консоли есть? Выполняется ли запрос AJAX вообще? Какой ответ сервера? Функтино вообще вызывается? Укажите работоспособный минимальный воспроизводимый пример и конкретно укажите, что не работает должным образом.

— 17.03.2022 18:20

new XMLHttpRequest() - но на самом деле вы должны использовать принести в 2022 году.

— 17.03.2022 18:22

javascript json

17.03.2022 18:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Рекомендую использовать fetch. Позволяет установить method и некоторые другие значения.

Можно сделать с выборкой, а не с XHR: Вы можете использовать API с объектами запроса и ответа. Вы можете выполнять no-cors запросы, получая ответ от сервера, который не поддерживает CORS. Вы не можете получить доступ к телу ответа непосредственно из JavaScript.

async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

function updateStats(username, stats){
  postData('https://pitpanda.rocks/api/players/' + username, { stats: stats })
  .then(data => {
    console.info(data); // JSON data parsed by `data.json()` call
  });
}

updateStats('otik', 123);

Ответы только на код обычно бесполезны. Пожалуйста, дайте некоторый контекст и поясните, почему это помогает.

— 17.03.2022 18:55

17.03.2022 18:29