为什么我的数据库ajax​​调用和按钮不起作用？

Question

伙计们，我尝试创建一个包含数据库的简单全栈应用程序。用户可以轻松删除表单行。但是，我检查了我的ajax并查看了文件，为什么没有错

jquery.min.js:2 DELETE http://localhost:3000/delete/[object%20Object] 404 (Not Found)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ main.js:6
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
main.js:14 {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
jquery.min.js:2 XHR failed loading: DELETE "http://localhost:3000/delete/[object%20Object]".

AJAX：

$(document).ready(function () {
    $("#Delete-button").on('click',function(){
        var id = $(this).data(id);
        var url = '/delete/' + id;
        if(confirm('Delete Recipe?')){
            $.ajax({
                url: url,
                method: "DELETE",
                success: (result)=>{
                    console.log("Sucess! Deleting the item!");
                    window.location.href = '/';
                },
                error:(err)=>{
                    console.log(err);
                }
            })
        }
    })
});

index.html文件

 <button id = "Delete-button" type="button" class="btn btn-danger" data_id = "{id}">Delete</button>

Answer 1

jquery.min.js:2 DELETE http://localhost:3000/delete/[object%20Object]是问题所在。

问题是：var id = $(this).data(id);为您提供了对象。

我建议您改用var id = $(this).attr("data_id");。

您应该看到以下内容：https://api.jquery.com/jQuery.data/

希望有帮助。

Answer 2

问题出在删除

如何填充ID值 同样，以下语句不返回纯字符串，而是返回一个对象。 var id = $（this）.data（id）;

在下面的语句中 jquery.min.js：2 DELETE http://localhost:3000/delete/[object%20Object] 404（未找到） [object％20Object] <-这是问题所在