Как я могу избежать 400 (Плохой запрос) от AJAX PUT - PullRequest
Новая
       31

Как я могу избежать 400 (Плохой запрос) от AJAX PUT

0 голосов
/ 21 декабря 2018

Итак, я получил этот JavaScript, который должен отправлять некоторые данные с PUT на мой сервер с помощью ajax.

var payload = 'id=' + id + '&brand=' + brand + '&model=' + model + '&country=' + country + '&number=' + number + '&alkohol=' + alkohol + '&volume=' + volume + '&price=' + price + '&comment=' + comment;

var fixedPayload = payload.split(' ').join('+'); // replace blanks with +

$.ajax({
        type: 'PUT',
        url: 'http://localhost:3000/drinks/' + fixedPayload,
        // data: fixedPayload, this does not work either
        success: function (data) {
            alert('Update was successfull!');
        }
    });

Это на сервере 

app.put('drinks/:id', (req, res) => {

    let id = req.params.id;
    var data = {
        brand: req.body.brand,
        model: req.body.model,
        country: req.body.country,
        number: req.body.number,
        alkohol: req.body.alkohol,
        volume: req.body.volume,
        price: req.body.price,
        comment: req.body.comment
    };
    Drink.findByIdAndUpdate(id, data, function(err, drink) {
        if (err) throw err;

        res.send('Drink updated - '+drink.model);
        });
});

Это то, что я получаю

jquery-3.3.1.min.js: 2 PUT http://localhost:3000/drinks/?5c1b873a6a0a5d3ae0342f01&brand=L%C3%A4sk&model=Cola&country=Sverige&number=999&alkohol=0%&volume=33+cl&price=20&comment=Cola+asd 404 (не найдено)

Console.log (fixedPayload)

? 5c1b873a6a0a5d3ae0342f01 & brand = Läsk & model = Cola & country = Sverige & number = 999 & alkohol = 0% & volume = 33 + cl & price = 20 & comment = Cola + asd

В чем проблема?Я также пытался отправить объект вместо строки, но с тем же результатом

Решено

AJAX 

package = {
    brand: brand,
    model: model,
    country: country,
    number: number,
    alkohol: alkohol,
    volume: volume,
    price: price,
    comment: comment        
};




$.ajax({
    type: 'PUT',
    url: `http://localhost:3000/drinks/${id}`, // changed it here
    data: package,
    success: function (data) {
        alert('Update was successfull!');
        window.location = "http://localhost:3000/";
    }
});

Ответы [ 3 ]

0 голосов
/ 21 декабря 2018

Ваш URL отформатирован, я верю, что id, который является частью параметров вашего URL, должен быть частью пути.В вашем примере: http://localhost:3000/drinks/5c1b873a6a0a5d3ae0342f01?brand=...

0 голосов
/ 21 декабря 2018

Создание HTTP-запросов довольно сложно (например, символ % нуждается в кодировке, чего не делает ваш код: это может быть причиной ошибки 400).JQuery хорошо делает это для вас.Возможно, вам лучше позволить ему позаботиться о создании строки запроса, передавая объект, а не строку. 

var payload = {
    id: id,
    brand: brand,
    model: model,
    country: country,
    number: number,
    alkohol: alkohol,
    volume: volume,
    price: price,
    comment: comment
};

$.ajax({
    type: 'PUT',
    url: 'http://localhost:3000/drinks/',
    data: payload,
    success: function (data) {
        alert('Update was successfull!');
    }
});

Более того, ваш серверный код ожидает запрос в формате drinks/:id, так что вы, вероятно,на самом деле нужно что-то вроде 

    url: 'http://localhost:3000/drinks/' + id,

в вашем объекте настроек AJAX.

0 голосов
/ 21 декабря 2018

Вот проблемы с вашим кодом:

  • вашей конечной точке drinks/:id требуется переменная пути, id, которая не установлена, так как вы добавляете drinks/ строку запросана вашем клиенте: 'http://localhost:3000/drinks/' + fixedPayload
  • вы передаете свои параметры в виде строки запроса, когда сервер ожидает, что они будут в теле.brand: req.body.brand

Это должно быть что-то вроде: 

var payload = '?brand=' + brand + '&model=' + model + '&country=' + country + '&number=' + number + '&alkohol=' + alkohol + '&volume=' + volume + '&price=' + price + '&comment=' + comment;

var fixedPayload = payload.split(' ').join('+'); // replace blanks with +

$.ajax({
        type: 'PUT',
        url: 'http://localhost:3000/drinks/' + id,
        data: fixedPayload,
        // data: fixedPayload, this does not work either
        success: function (data) {
            alert('Update was successfull!');
        }
    });
...