jQuery ajaxForm()的应用

当需要通过 AJAX 方式向服务器提交表单数据时，jQuery 提供了方便的方法 ajaxForm()。下面是该方法的详细介绍及应用攻略。

ajaxForm() 方法的使用

基本语法

$(selector).ajaxForm(options);

其中，selector 是表单的选择器，options 是一个对象，包含了一些可选参数及回调函数，具体参数如下：

参数	类型	描述
url	字符串	请求目标URL地址，可以是相对路径或绝对路径。
type	字符串	请求方式，可以是 get 或 post。
dataType	字符串	预期服务器返回的数据类型，默认为 json。
timeout	数字或字符串	超时时间，单位毫秒。
beforeSend	函数	发送请求前的回调函数，在发送请求之前调用，可以通过此函数设置 HTTP 头信息。
success	函数	请求成功之后的回调函数，服务器返回数据后调用。
error	函数	请求失败时的回调函数，服务器请求出现问题的时候调用。
complete	函数	服务器返回数据之后，无论请求成功或失败，都将调用此回调函数。

示例1: 简单提交

以下面的表单为例，

<form id="myForm" method="post" action="server.php">
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="email" placeholder="Email">
  <input type="submit" value="Submit">
</form>

可以通过下面的代码来提交表单数据：

$('#myForm').ajaxForm({
  success: function(response) {
    console.log(response);
  }
});

这个示例中，我们通过 ajaxForm() 方法提交了一个表单，当服务器返回成功响应时，在控制台打印响应内容。请求的默认类型是post，数据类型是 json。

示例2: 文件上传

考虑如下的 HTML 代码，其中包含了一个文件上传表单：

<form id="fileForm" method="post" action="server.php" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="Submit">
</form>

为了使用 ajaxForm() 来上传文件，需要在选项中加入 dataType: 'json' 和 contentType: false 以及 processData: false 这三个参数。由于上传的是文件，必须使用 FormData 来构建表单数据。下面是示例代码：

$('#fileForm').ajaxForm({
  dataType: 'json',
  contentType: false,
  processData: false,
  success: function(response) {
    console.log(response);
  }
});

本示例中，我们使用 ajaxForm() 方法来实现文件上传并在控制台中打印返回的数据。需要注意的是，本地运行时，需要将 action 属性设置为localhost。