2. $(“form1”).ajaxForm(options)
是对$(“any”).ajaxSubmit(options)函数的一个封装,适用于表单提交的方式(注意,主体对象是<form>),会帮你管理表单的submit和提交元素([type=submit],[type=image])的click事件。在出发表单的submit事件时:阻止submit()事件的默认行为(同步提交的行为)并且调用$(this).ajaxSubmit(options)函数。
ajaxForm支持Jquery插件的委托方式(需要Jquery v1.7+),所以当你调用ajaxForm的时候其表单form不一定存在,ajaxSubmit将在适当的时候调用。Eg:
代码 复制 - 运行
$('#myForm').ajaxForm({
delegation: true,
target: '#output'
});
另外:如果你翻看原来码你可能会发现这样的绑定代码:.bind('submit.form-plugin', options, doAjaxSubmit),即submit事件名后面有个”. form-plugin”。这是jQuery事件命名空间语法,作用是方便事件的管理。
文件上传示例(被jQuery.form插件封装的相当简单,既然写了就也贴出来吧)
代码 复制 - 运行
<form id="form1" action="ajaxOperation.ashx?Action=formUpload" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>附件名字:</td>
<td>
<input type="text" name="fileName" /></td>
</tr>
<tr>
<td>附件:</td>
<td>
<input type="file" name="document" /></td>
</tr>
<tr>
<td colspan="2" style="align-content: center">
<input type="submit" value="模拟iframe提交表单" />
</td>
</tr>
</table>
</form>
<label id="responseText"></label>
提交代码:
代码 复制 - 运行
<script type="text/javascript">
$(function () {
var options = {
success: function (data) {
$("#responseText").text(data);
}
};
$("#form1").ajaxForm(options);
});
</script>
3. $(“form1”).ajaxFormUnbind()
取消$(“”).ajaxForm(options)函数对指定表单绑定的submit和click事件。
4. $(“form1”).formToArray(semantic,elements)
序列化当前表单元素到一个数组中,每个数组元素都是包含name和value属性的对象。返回值是内部构件的一个数组元素,而elements参数将包含除<input type=”image”>以外的所有表单元素。
5. $(“form1”).formSerialize(semantic)
将表当前单元素序列化为字符串形式。
实现如下:
代码 复制 - 运行
$.fn.formSerialize = function(semantic) {
return $.param(this.formToArray(semantic));
};
6. $(“form1”).fieldSerialize(successful)
序列化包含name属性的表单元素为一个字符串。Successful参数标识是否获取type为reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。
7. $(“form1”).fieldValue(successful) 或 $.fieldValue(element, successful)
获取指定表单中的表单元素或指定表单元素的值。Successful参数标识是否获取type为reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。
8. $(“form1”).clearForm(includeHidden)
清空当前表单中input、select、textarea元素的值。includeHidden设置决定如何清空隐藏域元素。
a) 传递true,表示清空表单的所有隐藏域元素。
b) 传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域
9. $.(“form1”).clearFields(includeHidden) 和 $.(“form1”).clearInputs(includeHidden)
作用相同,清空当前表单中所有表单元素的指。includeHidden设置决定如何清空隐藏域元素。
a) 传递true,表示清空表单的所有隐藏域元素。
b) 传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域
10. $(“form1”).resetForm()
重置当前表单元素,导致所有表单元素重置到它的初始值。
11. $(“form1”).selected(select)
将当前表单元素中所有checkbox、radio设置为select。select参数为布尔值。
本文到此结束,通过此博文相信各位,
1. 再也不会去写龌龊的同步提交和使用aspx进行异步相应了。
2. 再也不用烦恼表单提交过程中各个控件的值如何获取的问题,并且通过jQuery.form表单插件轻松实现表单异步提交、文件上传及进度条显示。
3. 清楚的认识了jQuery.form表单在给我们提供便利的背后到底做了什么手脚(源码分析)。