如何使用JavaScript按id删除产品？

我需要帮助我正在尝试使用jquery从数据库中删除产品。我只使用HTML实现了这一点，现在我正在尝试使用JavaScript实现这一点。我想，既然我只是在提交一个表单，我就应该使用我正在使用的$（“Formid”）.submit（）。但是我的工作版本把我带到了另一个页面。是否有办法将表单的值放入按钮或对话框中，以便我在提交表单以删除产品时确保它正在检索id

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type = "text/javascript">
function getProducts(){
    $.ajax(
        {
            type: "GET",
            url: "/SOSv8/api/products",
            dataType: "json",
            success: function(data)
            {
                $('#products').dataTable({
                    "data" : data,
                    "columns" : [{"data" : "name"}, {"data" : "descript"}, {"data" : "code"}, {"defaultContent" : "<button>delete</button>"}]
                });
            $('#products').on('click', 'button', function (){
                    $("#dialog").dialog(
                        {
                            width: '500px',
                            buttons: {
                                ok: function(){$("#delete").submit()},
                                cancel: function(){$(this).dialog('close')}
                            }

                    });
            });
            },
            Error: function (xhr, ajaxOptions, thrownError)
            {
                alert(xhr.status);
                alert(thrownError);

            }
        }   

    )
}
function dialog() {
    $( "#dialog" ).dialog(
        {
            width: '500px',
            buttons: {
                ok: function(){$("#delete").submit()},
                cancel: function(){$(this).dialog('close')}
            }
        }
    );
} 
$(document).ready(getProducts);
 </script>
        <table id="products" style="width:50%" border="1">
            <thead>
                <tr style="background-color:#A0A0A0">
                    <th><label>Name</label></th>
                    <th><label>Description</label></th>
                    <th><label>Code</label></th>
                    <th><label>Options</label></th>
                </tr>
            </thead>
        </table>

<div id="dialog" title="delete Code?" >
    <P> are you sure you want delete this code?</P> 
</div>

<form:form id="delete" method="POST"  modelAttribute="product" action="deleteProduct">
<form:hidden path="id" value="${product.id}" />
</form:form>

函数getProducts（）{
$.ajax(
{
键入：“获取”，
url:“/SOSv8/api/products”，
数据类型：“json”，
成功：功能（数据）
{
$（“#产品”）。数据表({
“数据”：数据，
“列”：[{“数据”：“名称”}，{“数据”：“描述”}，{“数据”：“代码”}，{“默认内容”：“删除”}]
});
$（“#产品”）。在（'单击'，'按钮'，函数（）{
$（“#对话框”）。对话框(
{
宽度：“500px”，
按钮：{
确定：函数（）{$（“#删除”）.submit（）}，
取消：函数（）{$（this）.dialog（'close'）}
}
});
});
},
错误：函数（xhr、ajaxOptions、thrownError）
{
警报（xhr.状态）；
警报（thrownError）；
}
}   
)
}
函数对话框（）{
$（“#对话框”）。对话框(
{
宽度：“500px”，
按钮：{
确定：函数（）{$（“#删除”）.submit（）}，
取消：函数（）{$（this）.dialog（'close'）}
}
}
);
} 
$（文档）.ready（getProducts）；
名称
描述
密码
选择权
 确实要删除此代码吗？

您可以将一个函数传递给

submit（）

，这样您就可以在提交表单之前进行所需的检查，事实上，如果

返回false从回调函数中，表单永远不会在第一个位置提交。因此，您可以通过一些
console.log（id）
进行一些验证来调试代码

$('formId').submit(function(){
    // do some debugging here and return true to perform the submit or false to cancel
    console.log(idToDelete);
    return true;
});

切勿将事件处理程序放入ajax请求的
success:
回调中。请阅读。你的问题包含了很多你甚至自己评论过的代码，这些代码都与你无关。它似乎没有包含您为
$（“Formid”）.submit（）尝试的代码。