HTTP POST -> 400: неверный запрос

Я учусь создавать API, и пока API работает нормально (с Postman). Теперь я пытаюсь создать приложение, которое его использует, и мне удалось сделать запрос GET и DELETE, но я застрял на POST и PUT.

Вот что я пробовал для POST:

url = "http://localhost:8000/musiques"

let titre = document.getElementById('formTitre').value;
let auteur = document.getElementById('formAuteur').value;
let genre = document.getElementById('formGenre').value;
let annee = document.getElementById('formAnnee').value;
let image = document.getElementById('formImage').value;

let jsonArr = [];

jsonArr.push({
    auteur: auteur,
    titre: titre,
    genre: genre,
    annee: annee,
    image: image
});
console.info(jsonArr);

let req = new XMLHttpRequest();
req.open("POST", url);
req.send(jsonArr);

когда я пытаюсь это сделать, у меня появляется ошибка 400 плохой запрос.


Обновлено:
хорошо, теперь у меня есть это:

let titre = document.getElementById('formTitre').value;
let auteur = document.getElementById('formAuteur').value;
let genre = document.getElementById('formGenre').value;
let annee = document.getElementById('formAnnee').value;
let image = document.getElementById('formImage').value;

let jsonArr = [];

console.info(titre);

jsonArr.push({
    auteur: auteur,
    titre: titre,
    genre: genre,
    annee: annee,
    image: image
});

console.info(JSON.stringify(jsonArr));

fetch(url, {
    method: 'POST',
    body: JSON.stringify(jsonArr),
    headers:{
        'Content-Type': 'application/json'
    }
}).then(res => res.json())
.then(response => console.info('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

которые дают мне ошибку:

Success: {"error":{"code":500,"message":"Internal Server Error","exception":
[{"message":"An exception occurred while executing 'INSERT INTO api_musique
(auteur, genre, image, annee, titre) VALUES (?, ?, ?, ?, ?)' with params 
[null, null, null, null, null]:\n\nSQLSTATE[23000]: Integrity constraint 
violation: 1048 Le champ 'auteur' can't be empty

что сейчас намного лучше. Большое спасибо, я над этим работаю.

есть ли больше информации, чем в ответе удаленного сервера? Не забывайте, что мы не знаем, какой формат запроса он ожидает, какие значения данных считает допустимыми или какие значения вы фактически отправили.

ADyson 01.01.2019 20:36

@ADyson Я внес некоторые изменения, это действительно лучше с этим сообщением об ошибке.

Antoine553 01.01.2019 21:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
487
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы можете использовать fetch:

fetch(url, { method: "POST", body: JSON.stringify(jsonArr) })

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

Объект ответа позволит вам выяснить, почему вы получаете 400. В противном случае это может быть проблема, вызванная вашим API.

вот поправка

let titre = document.getElementById('formTitre').value;
let auteur = document.getElementById('formAuteur').value;
let genre = document.getElementById('formGenre').value;
let annee = document.getElementById('formAnnee').value;
let image = document.getElementById('formImage').value;

let jsonArr = {
    auteur: auteur,
    genre: genre,
    image: image,
    annee: parseInt(annee),
    titre: titre
};

console.info(titre);


console.info(JSON.stringify(jsonArr));

fetch(url, {
    method: 'POST',
    body: JSON.stringify(jsonArr),
    headers:{
        'Content-Type': 'application/json'
    }
}).then(res => res.json())
.then(response => console.info('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

всем большое спасибо

Другие вопросы по теме