ajaxForm——最简单的ajax表单提交Jquery插件

我们在提交表单的时候，如果没有使用ajax提交，页面都会自己刷新一下，显得非常的不友好，所以我们需要把我们的表单提交修改为ajax的模式，可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段：正在提交？提交成功？

网上有很多的方法实现这个功能，但是都比较复杂，这里小编推荐一款应该说是最简单易用的ajax表单提交插件，这款插件是Jquery插件，而非wordpress插件，这点请注意。

下载地址： http://malsup.github.com/jquery.form.js

表单插件API

首先你需要了解这款插件的主要方法：

ajaxForm
ajaxSubmit
formToArray
formSerialize

fieldSerialize
fieldValue
clearForm
clearFields
resetForm

这里我放出一段经过修改的示例：

注意这些类：

tishi2（覆盖整个表单的白色透明膜）默认隐藏  父级

tishi（一个现实成功提交的绿色小框）默认隐藏  子集

tishi3（一个蓝色的框，提示正在提交）默认不隐藏，继承父级的隐藏属性   子集

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js”></script>
<script src=”http://malsup.github.com/jquery.form.js”></script>
<script type=”text/javascript”>

$(document).ready(function() {

$(‘#submit’).click(function() { //When trigger is clicked…

$(‘.tishi2’).fadeIn(‘500’);
});  //设置按钮下，立即现实tishi2，显示白色的膜和tishi3正在提交中
//设置
var options = {

success: function() {
$(this).ajaxSubmit();
$(‘.tishi’).fadeIn(‘500’);
setTimeout(“$(‘.tishi2’).fadeOut(‘slow’)”,3000);
setTimeout(“$(‘.tishi’).fadeOut(‘slow’)”,3000);

},    //这里我设置成功之后的条件，显示tishi（提交成功）遮住tishi3，三秒之后，整个大的tishi消失
error: function() {
$(‘.tishi2’).fadeOut(‘slow’);
alert(“填写错误，重新填写！”); return false;

} 如果填写错误，输出错误提示框   tishi2消失。
};

$(‘#commentform’).ajaxForm(options);

//这里的一句话就是让你的表单进行ajax提交，是不是很简单呢？  #commentform   就是你的表ID   设置对了就OK啦

});
</script>

下面看看具体的效果：

如何，这样的效果很酷把~任何网页的任何表单都能用这个来实现哦~

下面介绍一下具体的参数：

ajaxForm（）

增加所有需要的事件监听器，为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中，使用 ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options 对象。
可链接（Chainable）：可以。

实例：

$(‘#myFormId’).ajaxForm();

ajaxSubmit（）

马上由AJAX来提交表单。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链接（Chainable）：可以。

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。

url

指定提交表单数据的URL。
默认值：表单的action属性值

type

指定提交表单数据的方法（method）：“GET”或“POST”。
默认值：表单的method属性值（如果没有找到默认为“GET”）。

beforeSubmit

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数 据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：

[ { name: ‘username’, value: ‘jresig’ }, { name: ‘password’, value: ‘secret’ } ]

默认值：null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：

‘xml’：如果dataType == ‘xml’，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。

‘json’：如果dataType == ‘json’， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。

‘script’：如果dataType == ‘script’， 服务器响应将求值成纯文本。

默认值：null（服务器返回responseText值）

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type=”image”. You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type=”image”.
布尔标志，表示数据是否必须严格按照语义顺序（slower？）来进行提交。注意：一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了 type=”image”的input元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type=”image”的input元素，就应该将 semantic设置为true。（译注：这一段由于无法理解，翻译出来可能语不达意，但请达人指正。）
默认值：false

resetForm

布尔标志，表示如果表单提交成功是否进行重置。
Default value: null

clearForm

布尔标志，表示如果表单提交成功是否清除表单数据。
默认值：null

赶快试一下把~ 希望本文对你有所帮助！