Javascript （AJAX）如何创建jQuery POST delete确认按钮？

我有一个ajax

POST

delete方法，它带有一个jQuery模式弹出窗口，当我单击delete按钮时，它会删除一门课程。弹出窗口显示，但当我关闭弹出窗口并刷新页面时，我看到记录被删除

有没有一种方法可以实现带有jQuery弹出窗口的确认按钮，当用户单击“是”并自动刷新页面时，确认按钮才会被删除

Html

@Html.ActionLink("Delete", "Delete", new { id = item.CourseID }, new { @class = "deletebtn", @id=item.DepartmentID })

<div id="dialog" title="Delete Department" style="display: none">
    <p>Are you sure you want to delete this Course?</p>
    <button id="confirm-deletion">Yes</button>
    <button id="abort-deletion">No</button>
</div>

@Html.ActionLink（“删除”，“删除”，新建{id=item.CourseID}，新建{@class=“deletebtn”，@id=item.DepartmentID}）
是否确实要删除此课程

对
不

脚本

    <script>
    $(function () {
        $(".deletebtn").on("click", function (e) {
            e.preventDefault();
            $('#dialog').dialog();

            var btnobj = $(this);
            var id = btnobj[0].id;

            $('#confirm-deletion').on("click", function() {

                //$('#dialog').dialog();

                //var btnobj = $(this);
                //var id = btnobj[0].id;
                //console.log(btnobj);

                var token = $('input[name="__RequestVerificationToken"]').val();
                var data = { id: id, __RequestVerificationToken: token };

                $.ajax({
                    type: "POST",
                    url: "@Url.Action("Delete","Course")",
                    data: data,
                    //ajaxasync: true,
                    success: function () {
                        console.log("success");
                    },
                    error: function () {
                        console.log("failed");
                    }
                });
            });
        });
    });
</script>

$（函数（）{
$（.deletebtn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（'#dialog'）。dialog（）；
var btnobj=$（本）；
var id=btnobj[0].id；
$（“#确认删除”）。在（“单击”，函数（）上）{
//$（'#dialog'）。dialog（）；
//var btnobj=$（本）；
//var id=btnobj[0].id；
//console.log（btnobj）；
var token=$（'input[name=“\uu RequestVerificationToken”]”）val（）；
var data={id:id，u RequestVerificationToken:token}；
$.ajax({
类型：“POST”，
url:“@url.Action”（“删除”，“课程”）”，
数据：数据，
//ajaxasync:true，
成功：函数（）{
控制台日志（“成功”）；
},
错误：函数（）{
console.log（“失败”）；
}
});
});
});
});

您打开对话框，但这不会阻止AJAX请求的执行。为什么会这样？您只需打开一个对话框，然后立即发送AJAX请求。您需要在模式对话框内的按钮被单击时执行请求，而不是在打开时

HTML:

---

正如gerrit所说，为对话框中的每个按钮定义单击函数，并使用ajax将代码移动到函数中。在单击中调用函数

 $( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icons: {
        primary: "ui-icon-heart"
      },
      click: function() {
        $( this ).dialog( "close" );
      }

      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});

---

我是否需要这两个函数的

preventDefault（）

，比如单击打开它，然后单击实际删除记录？首先，我必须指出Martinas answer是正确的答案，因为她显然比我更了解jQuery dialog API。但为了回答您的问题：我认为您不需要任何

preventDefault（）

，只要您不单击表单侧面的提交按钮。我使用

确认删除

按钮发送表单下方的AJAX请求，但单击“是”时对话框不会自动关闭我必须手动刷新页面。我再次引用Martinas的答案，按照她的建议去做。只需将您的AJAX请求添加到点击事件中，

$（this）.dialog（“close”）行我这样做了，但在刷新方面仍然不起作用。谢谢你的帮助。我将不得不更深入地研究这个问题。我可以在删除后自动刷新页面吗？现在，我只能在手动刷新页面后验证记录是否已删除。您可以添加“window.location.reload（）；”要在ajax成功后刷新页面，或者如果您有权访问ajax成功中的“id”，您还可以选择该项并将其删除，而无需重新加载页面“$”（“#”+id）.remove（）。您甚至可以将id从对话框传递到ajax成功。
$('#confirm-deletion').click(function() {
  // Send request here
});

 $( ".selector" ).dialog({
  buttons: [
    {
      text: "Ok",
      icons: {
        primary: "ui-icon-heart"
      },
      click: function() {
        $( this ).dialog( "close" );
      }

      // Uncommenting the following line would hide the text,
      // resulting in the label being used as a tooltip
      //showText: false
    }
  ]
});