jquery之表单插件(通过Ajax提交表单之一)

jquery之表单插件(通过Ajax提交表单之一)

----------

 

jquery发起Ajax请求很简单，不过表单插件使得事情更加简便。表单插件引入两个经由Ajax提交表单的新命令：一个在脚本控制下发起Ajax请求(传递目标表单的数据作为请求的参数)，另一个则设置任何表单使表单提交重路由为Ajax请求。

这两个方法都使用jquery的Ajax核心函数去执行Ajax请求，因此所有的全局jquery挂钩继续被应用，即便是在利用这些方法来替换核心jquery的Ajax API的时候。

---

1.获取表单数据用于Ajax请求

我们看到核心Ajax函数的方便，表单插件的serializeForm()方法与核心Ajax函数相结合，使得提交表单的所有控件更为简便。比那更加简便的是，表单插件利用ajaxSubmit()命令使得经由Ajax提交整个表单非常简单。

ajaxSubmit()命令，如果应用到包含表单的包装集，就获取目标表单的所有成功控件的名称和值并且作为Ajax请求进行提交。可以给这个方法提供关于如何生成请求的信息，或让其默认地根据目标表单上的设置而生成请求。

===

ajaxSubmit()语法：

ajaxSubmit(options)

利用包装集里表单的成功控件来生成Ajax请求。参数options可以用来指定可选的设置，或者这些设置可以默认为下表所描述的值

参数

options   (对象|函数)一个散列对象(可选)，包含下表所描述的属性；如果想要设置的选项只是成功回调函数，可以直接传递成功回调函数而无需传递散列对象。

返回

包装集

===

参数options可以用来精确地指定如何生成请求。所有的属性都有默认值，这样设计是为了易于生成请求并且尽量减少麻烦。通常不带参数地调用这个方法而让它应用所有的默认值。

---

ajaxSubmit()命令的可选的属性，根据使用的可能性大小进行排序

名称               描述

url               (字符串)Ajax请求将要提交到该URL。如果省略，URL将从目标表单的action特性来获取

type               (字符串)在提交请求时使用的HTTP方法，如GET或POST。如果省略，则使用目标表单的method特性所指定的值。如果不指定type并且不指定表单 的method特性，则使用GET方法

dataType       (字符串)响应的预期数据类型，决定如何对响应体进行后续处理。如果指定，则必须是下列的类型之一。

                   xml : 作为xml数据进行处理。任何成功回调函数将被传递responseXML文档

                   json : 作为JSON构造进行处理。对JSON求值，其结果将传递给任何成功回调函数

                   script : 作为javascript进行处理。脚本将在全局上下文中进行求值

                   如果省略，则不对数据进行后续处理(除非其他选项，如target已指定)

target             (字符串|对象|元素)指定一个或多个DOM元素，这个(些)元素接收响应体作为内容。这个属性可以是字符串，描述jquery选择器；可以是jquery包 装器，包含目标元素；或者直接是一个元素引用。如果省略，则没有任何元素接收响应体。

beforeSubmit (函数)指定在发起Ajax请求之前调用的回调函数。这个回调函数可以用来执行任何预处理操作，包括

                   表单数据的验证在内。如果这个回调函数返回false，则表单提交被取消

                   下面是传递给这个回调函数的3个参数

                   数据值的数组，作为参数传递给请求。这是对象数组，每个对象都包含两个属性name和value(分别包含请求参数的名称和值)

         已应用ajaxSubmit()命令的jquery匹配集

                   已传递给ajaxSubmit()命令的options对象

                   如果省略，则不调用任何预处理回调函数

success           (函数)指定回调函数。在请求已经完成并且返回带着成功状态的响应之后调用。传递的这个回调函数的3个参数如下：

                   根据dataType选项进行解释(处理)之后的响应体

                   包含success的字符串

                   已应用ajaxSubmit()命令的jquery匹配集

                   如果省略，则不调用任何成功回调函数；如果这是将要指定的唯一选项，则这个函数可以替换options散列对象而直接传递给命令。请注意：关于在错 误情况下调用的回调函数，沿无任何规定

clearForm       (布尔值)如果指定为true,则在成功提交之后清空表单。

resetForm        (布尔值)如果指定为true,则在成功提交之后使表单复位。

semantic          (布尔值)如果指定为true,则表单参数按照语义顺序来排列。这将造成的唯一差别在于为图像类型的input元素而提交的参数的位置(当通过点击那个元 素来提交表单时)。因为存在与这种处理相关的开销，所以只有在参数顺序对于服务器端的处理非常重要并且图像类型的input元素被用于表单时，才 应该启用semantic选项

其他选项           可以指定对核心jquery的$.ajax()函数来说可用的任何选项。

---

尽管选项的数量很多，但是调用ajaxSubmit()通常是相当简单的。如果我们只需提交表单到服务器(并且在请求完成时

没有什么要做的事情)，调用起来就非常简单。

如：

$('#targetForm').ajaxSubmit(); 

如果我们想要把响应加载到一个或多个目标元素：

$('#targetForm').ajaxSubmit({target:'.target'}); 

如果我们想要在回调函数里对响应进行处理：

$('targetForm').ajaxSubmit(function(){ /* do something with the response */ });  

如此等等。因为所有的选项都有合理的默认值，所以只需指定所需的那些信息就能调整表单提交，使它符合我们的要求。