Question

我正在尝试使用jQuery向我的服务器发送Ajax PUT请求但是当我console.log通过我的成功函数返回的数据时，我得到了我想要更新的相同数据。

这是我的Ajax请求：

$(".plus-button").on("click", function() {

    var handler = $(this).siblings(".editIngredientForm");

    var formData = {
        photoName: handler.children("#numberOfItems").prevObject[0][0]["value"],
        name: handler.children("#numberOfItems").prevObject[0][1]["value"],

        // Add + 1 to number of items in ingredient to account for the clicking on plus sign
        number: Number(handler.children("#numberOfItems").prevObject[0][2]["value"]) + 1,
    };

    var actionUrl = $(this).siblings(".editIngredientForm").attr("action");
    // console.log(formData);     

    $.ajax({
        url: actionUrl,
        data: formData,
        type: "PUT",
        success: function(data) {
            console.log(data);
        }
    })
});

这是处理更新的后端路由（Node JS）：

app.put("/inventory/:id", isLoggedIn, function(req, res) {
    Ingredient.findByIdAndUpdate(req.params.id, req.body.item, { new: true }, function(err, updatedIngredient) {
        if (err) {
            console.log(err);
        } else {
            if (req.xhr) {
                res.json(updatedIngredient);
            } else {
                req.flash("success", "You successfully updated the Ingredient's info");
                res.redirect("/inventory/" + req.params.id);
            }
        }
    })
})

有谁知道我做错了什么？

Answer 1

这是我最终找到的解决方案：

$(".plus-button").on("click", function(){

    var handler = $(this).siblings(".editIngredientForm");
    var oldNumber = handler.find('input[name="item[number]"]').val();
    var newNumber = Number(oldNumber) + 1;
    var numberOfIngredient = $(this).parent("#changeQuantitiesButtons").siblings("#state-of-inventory").children("#number-of-ingredient");
    handler.find('input[name="item[number]"]').val(newNumber);

    var formData= handler.serialize();
    var actionUrl = $(this).siblings(".editIngredientForm").attr("action");   

    $.ajax({
        url:actionUrl,        
        data:formData,
        type:"PUT",              
        success: function(data){
           numberOfIngredient.html(newNumber);
        }
    })
});

我没有直接通过Ajax put请求发送数据然后修改表单中的值，而是更改表单中的值并发送表单数据（我使用.serialize（）序列化）通过请求。

希望它会对某人有所帮助。

Ajax Jquery PUT请求不起作用

1 个答案: