ajax submit 确认—示例代码

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

当我们在网页中需要提交表单数据时，常常会遇到需要用户确认的情况。为了实现这个功能，我们可以使用Ajax来提交表单数据，并在提交前弹出一个确认对话框给用户。下面是一个示例代码，演示了如何使用Ajax来实现这个功能。

我们需要在页面中引入jQuery库，因为我们将使用jQuery的Ajax方法来发送请求。在示例代码中，我们使用了CDN方式引入jQuery库，你也可以通过其他方式引入。


<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form id="myForm" action="submit.php" method="post">
    <input type="text" name="name" placeholder="请输入姓名">
    <input type="submit" value="提交">
  </form>
  <script>
    $(document).ready(function() {
      $('#myForm').submit(function(e) {
        e.preventDefault(); // 阻止表单的默认提交行为
        if (confirm("确认要提交吗？")) {
          // 用户点击了确认按钮，执行Ajax提交
          $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            success: function(response) {
              // 处理成功的回调函数
              console.log('提交成功');
            },
            error: function(xhr, status, error) {
              // 处理失败的回调函数
              console.log('提交失败');
            }
          });
        } else {
          // 用户点击了取消按钮，不执行提交操作
          console.log('取消提交');
        }
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们首先给表单元素添加了一个id属性，以便在JavaScript中通过id选择器来获取表单元素。然后，我们使用jQuery的submit方法来监听表单的提交事件。当用户点击提交按钮时，会触发该事件。

在事件处理函数中，我们使用e.preventDefault()方法来阻止表单的默认提交行为。然后，我们使用confirm方法弹出一个确认对话框给用户，询问用户是否确认提交。如果用户点击了确认按钮，我们就使用jQuery的ajax方法来发送异步请求。在ajax方法的配置中，我们指定了请求的URL、请求的类型、请求的数据等信息。我们也指定了成功和失败的回调函数，以便在提交成功或失败时进行相应的处理。

如果用户点击了取消按钮，我们就不执行提交操作，而是在控制台输出一条取消提交的信息。

通过以上的代码示例，我们可以实现一个基于Ajax的表单提交确认功能。用户在点击提交按钮时，会弹出一个确认对话框，根据用户的选择来决定是否提交表单数据。

ajax submit 确认—示例代码

相关阅读