Having an issue with sending data using JavaScript and AJAX. The objective is to send the data via PUT method to the server.
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('+'); // replacing spaces with +
$.ajax({
type: 'PUT',
url: 'http://localhost:3000/drinks/' + fixedPayload,
success: function (data) {
alert('Update was successful!');
}
});
Server-side code
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);
});
});
Resulting error message
jquery-3.3.1.min.js:2 PUT http://localhost:3000/drinks/?... 404 (Not Found)
Logged fixedPayload value
?5c1b873a6a0a5d3ae0342f01&brand=Läsk&model=Cola&country=Sverige&number=999&alkohol=0%&volume=33+cl&price=20&comment=Cola+asd
What could be causing this issue? Tried sending Object instead of String but same result.
Solution
Adjusted AJAX request
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}`,
data: package,
success: function (data) {
alert('Update was successful!');
window.location = "http://localhost:3000/";
}
});