如何使用jQuery ajax方法在提交表单前显示确认对话框？

Question

我正在使用jQuery ajax从表格中删除客户。在提交表单之前，如何显示确认框？最好使用jQuery的对话框。

我以前看到过类似的问题，但没有一个能帮助我。

这是我的代码：

    $.ajax({
        type: "POST",
        url: "delete/process.php",
        data: "delcustomerid="+ delcustomerid,
        success: refreshTable
    });

- user272899

Answer 1

ajax函数有一个beforeSend事件，您可以使用它在提交表单之前显示对话框。

如果对话框指示不应提交表单，则您需要从函数中返回false，以便不会进行表单提交。

在您的情况下，您需要执行以下操作：

$.ajax({ 
    beforeSend: function (request) {
        // This is where you show the dialog.
        // Return false if you don't want the form submitted.
    },

    type: "POST", 
    url: "delete/process.php", 
    data: "delcustomerid="+ delcustomerid, 
    success: refreshTable 
});

如果您正在为表单发出POST请求（看起来是这样的），我强烈建议您查看jQuery表单插件，因为它可以大大简化通过AJAX调用提交表单的过程，并使用与调用ajax相同的参数。请注意保留HTML标签。

- casperOne

---

我使用了jQuery表单插件，但遇到了一些问题。我发现不使用插件做事情更容易（不是更快，哈哈）。感谢您的答案，这正是我要找的。那么(request)是什么？ - user272899

@user272899：请求参数包含将用于发出请求的XMLHTTPRequest实例。您不一定需要它，但它会传递给函数。 - casperOne

@user272899：另外，如果您愿意，可以详细说明一下jQuery表单插件的问题。我已经在这里写了一些关于如何使用jQuery表单插件以及验证（需要注意的事项）的信息：https://dev59.com/ZHI-5IYBdhLWcg3wJE0K - casperOne

Answer 2

你需要创建一个函数，在检查用户输入后执行所示的调用。

例如：

function DeleteWithCheck() {
  if (confirm("Are you sure you want to delete customer "+delcustomerid.ToString()))
  {
    $.ajax({
      type: "POST",
      url: "delete/process.php",
      data: "delcustomerid="+ delcustomerid,
      success: refreshTable
    });
  }
  else
    alert("Aborted");
}

当您想要执行删除操作时，请调用此函数。

- Hogan