[英]PUT request being called more than once
我是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
。
我希望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
你添加一個提交事件處理程序的形式( // On submitting the modify form
)您單擊處理程序內的產品( // On clicking modify
)。 這意味着每次您單擊產品ul
,都會添加一個新的Submit事件處理程序副本。 提交表單后,將調用所有這些副本,並且它們都將執行PUT請求。
解決方案是將表單的提交處理程序移開,即不在單擊處理程序之外。 這樣可以確保只添加一次。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.