如何避免 ajax PUT 的 400 (Bad Request)

Question

所以我得到了这个 JavaScript，它应该使用 ajax 向我的服务器发送一些带有 PUT 的数据。

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/";
    }
});

Answer 1

您的 URL 格式错误，我相信作为 URL 参数一部分的 id 应该是路径的一部分。在您的示例中：http://localhost:3000/drinks/5c1b873a6a0a5d3ae0342f01?brand=...

Answer 2

您的代码存在以下问题：

• 您的端点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!');
        }
    });

Answer 3

创建 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 设置对象中。