jQuery 表单提交调用函数

jQuery 是一个流行的 JavaScript 库，可以帮助程序员更方便地处理 HTML 文档、事件处理、动画操作等。在处理表单时，使用 jQuery 可以简化代码。本文将介绍如何使用 jQuery 实现表单提交调用函数。

1. HTML 表单的基本结构

HTML 表单元素包含 input、textarea、select 等等，用来收集用户输入的数据。表单提交通常需要用到 form 元素，例如：

<form action="http://example.com/form.php" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit">
</form>

2. 使用 jQuery 提交表单

使用 jQuery 的 ajax() 函数可以在不刷新页面的情况下提交表单数据，例如：

$(document).ready(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      success: function(response) {
        alert(response);
      }
    });
  });
});

上述代码中，submit() 函数用来捕获表单提交事件，preventDefault() 函数可以阻止表单默认的提交行为。使用 ajax() 函数发送表单数据，其中 url 参数表示请求的地址，type 参数表示请求的方法（比如 post 或 get），data 参数表示发送的数据，serialize() 函数可以将表单数据序列化成字符串。success 回调函数接收到服务器的响应后，可以执行一些操作，这里使用 alert() 函数弹出响应消息。

3. 示例

下面的示例展示了如何使用 jQuery 实现表单提交调用函数，注意将 form.php 替换成你的服务器端地址。

<form action="form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      success: function(response) {
        alert(response);
      }
    });
  });
});
</script>

4. 小结

本文介绍了如何使用 jQuery 实现表单提交调用函数，其中 ajax() 函数是核心。使用 jQuery，可以将代码量大大减少，提高开发效率。