最近在做表单提交,为了获取表单字段方便使用了该插件,做个记录,方便后续使用。
jquery.form.js
插件介绍
下载地址:http://plugins.jquery.com/form/
在Web表单开发中我们通常都是利用JQuery的Ajax函数来进行表单的提交。
这个软件就是利用封装了Ajax的提交,使我们开发更加快捷,插件中使用ajaxForm和ajaxSubmit两个方法来进行提交。
API
1. ajaxForm
ajaxForm不提交表单,在document的ready函数当中,使用ajaxForm为你的ajax提交做准备。
ajaxForm需要提供表单的id,action,method,最好在表单中提供submit按钮。它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个获取每个表单属性的值。它会自动收集当前表单中每个属性的值,然后将其提交到相应的action。
//myFormId代表表单的ID
$('#myFormId').ajaxForm();
2. ajaxSubmit
ajaxSubmit通过ajax快速提交表单,它使用的场景经常是一些超链接、按钮的click事件,它比ajaxForm更加灵活,因为它依赖于事件机制,只要有事件存在就能使用该方法。只需指定该form的action,可以不提供submit按钮。
/*myFormId代表提交的表单的ID,myButton代表相应的按钮ID*/
//form中有submit按钮
$('#myFormId').submit(function() {
$(this).ajaxSubmit();
});
//form中无submit按钮
$('#myButton').click(function() {
$('#myFormId').ajaxSubmit();
});
3. formSerialize
formSerialize将表单序列化成query string,这个方法将会返回如下形式的字符串:name1=value1&name2=value2
返回值:返回一个字符串
var queryString = $('#myFormId').formSerialize();
4. fieldSerialize
fieldSerialize将表单的部分元素序列化成query string,这个方法使用的场景是当你只需要序列化部分表单的时候,将会返回如下形式的字符串:name1=value1&name2=value2
返回值:返回一个字符串
//specialFields代表表单的某一个元素
var queryString = $('#myFormId .specialFields').fieldSerialize();
5. fieldValue
取出所有匹配要求的域的值,以数组形式返回。这个方法返回一个数组,如果没有符合条件的域,这个数组将会是个空数组,否则它将会包含至少一个值。
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
6. resetForm
重置表单,使其恢复成为表单的初始状态,就类似重置按钮的功能。
$('#myFormId').resetForm();
7. clearForm
清除表单,这个方法会使得input,textarea的值变为空,不选中任何select元素,radio和checkbox也都处于unchecked状态。就相当于把表单里面的内容都置为空。
$('#myFormId').clearForm();
8. clearFields
清除表单的部分元素
$('#myFormId .specialFields').clearFields();
以上就是jquery.form.js的API的简介
发表评论 取消回复