Question

我是Ajax / jQuery的新手，我正在进行一项任务，我必须使用http方法PUT来更新django模型。我目前使用的代码除一个问题外有效：每次点击新的修改按钮并提交表单时，PUT请求都会运行多次+ 1次。

来自console.log的示例：

(index):121 BUTTON: Pressed modify on product ID: 87
(index):133 GET: Looped through products for ID 87 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):121 BUTTON: Pressed modify on product ID: 88
(index):133 GET: Looped through products for ID 88 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):153 PUT: Received put request for ID: 88
(index):121 BUTTON: Pressed modify on product ID: 89
(index):133 GET: Looped through products for ID 89 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):153 PUT: Received put request for ID: 88
(index):153 PUT: Received put request for ID: 89

ajax代码：

//        MODIFYING A PRODUCT
product_ul.on("click", ".modify", function () { // On clicking modify
    var id = $(this).parents('li').attr('id'); // Get the PK which is the ID of the <li>
    console.log("BUTTON: Pressed modify on product ID: " + id);
    $.ajax({
        type: 'GET',
        url: 'get/',
        dataType: 'json',
        success: function (data) {
            $.each(data, function (key, value) { // Loop through all products from the json response
                if (value.id == id) { // If PK matches product PK from response
                    $('#dataModal').modal("show"); // Show modal
                    $('#edit_name').val(value.name); // Set the values
                    $('#edit_description').val(value.description);
                    $('#edit_price').val(value.price);
                    console.log("GET: Looped through products for ID " + id + " and set the values in the modal accordingly");
                }
            });
        }
    });
    $("#modify_product_form").submit(function (event) { // On submitting the modify form
        event.preventDefault(); // Prevent refresh

        var product_data = { // Get the values from the form
            name: $('#edit_name').val(),
            description: $('#edit_description').val(),
            price: $('#edit_price').val()
        };

        $.ajax({
            type: 'PUT',
            url: 'modify/' + id + '/',
            data: product_data,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                console.log("PUT: Received put request for ID: " + id);
            },
            success: function (product) {
                var product_html = "<li id=" + product.id + "><button class='delete btn btn-xs btn-danger'><span class='glyphicon glyphicon-remove'></span></button>" +
                    " <button class='modify btn btn-xs btn-warning'><span class='glyphicon glyphicon-cog'></span></button> " +
                    product.name + "</li>";
                $('#' + product.id).html(product_html); // Change the html to the modified version so it updates the list
                $('#dataModal').modal("hide"); // Hide the modal
            }
        });
    });
});

这就是网页的外观：

点击修改按钮后：

到目前为止，我唯一的假设是$("#modify_product_form").submit(function (event)在product_ul.on("click", ".modify", function ()范围内，从而导致一些冲突，但我不知道如果没有嵌套它们我怎么能得到var id。< / p>

我期望console.log看起来如何：

(index):121 BUTTON: Pressed modify on product ID: 87
(index):133 GET: Looped through products for ID 87 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 87
(index):121 BUTTON: Pressed modify on product ID: 88
(index):133 GET: Looped through products for ID 88 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 88
(index):121 BUTTON: Pressed modify on product ID: 89
(index):133 GET: Looped through products for ID 89 and set the values in the modal accordingly
(index):153 PUT: Received put request for ID: 89

如果我应该提供任何其他代码，请告诉我，如果您的眼睛因看到我的业余编码而受伤，我会道歉！

140256257

Answer 1

您正在为表单（// On submitting the modify form）添加提交事件处理程序产品的点击处理程序（// On clicking modify）。这意味着每次单击产品ul时，都会添加提交事件处理程序的新副本。提交表单后，将调用所有这些副本，并且它们都会执行PUT请求。

解决方案是将表单的提交处理程序移开，即在单击处理程序之外。这样可以确保它只添加一次。

PUT请求被多次调用

1 个答案: