jquery form插件(一)

来源：互联网发布：微分销系统开发源码编辑：程序博客网时间：2024/05/24 06:41

jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。插件里面主要的方法,ajaxForm 和ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。这让采用AJAX方式提交一个表单的过程简单的不能再简单了！

官网地址:www.malsup.com/jquery/form/：有文档说明和演示示例可供参考！

主要的函数：

ajaxForm

预处理将要使用AJAX方式提交的表单，将所有需要用到的事件监听器添加到其中。它不是提交这个表单。在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。
是否可以连环调用: 是。

$('#myFormId').ajaxForm();

ajaxSubmit

立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。ajaxForm 需要零个或一个参数。唯一的一个参数可以是一个回调函数或者是一个可选参数对象。
是否可以连环调用: 是。

$("#basicForm").submit(function(){    $(this).ajaxSubmit();    return false;});

ajaxForm和ajaxSubmit的区别:
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。

formSerialize

将表单序列化成查询串。这个方法将返回一个形如：username=aaaaaaa&password=asdf的字符串。
是否可以连环调用: 否, 这个方法返回的是一个字符串。

queryString = $("#basicForm").formSerialize();

fieldSerialize

将表单里的元素序列化成字符串。当你只需要将表单的部分元素序列化时可以用到这个方法。这个方法将返回一个形如：username=aaaaaaa的字符串。
是否可以连环调用: 否, 这个方法返回的是一个字符串。

queryString = $("#basicForm input[name='username']").fieldSerialize();

fieldValue

取出所有匹配要求的域的值，以数组形式返回。从 0.91 版本开始, 这个方法始终返回一个数组。如果没有符合条件的域，这个数组将会是个空数组，否则它将会包含至少一个值。
是否可以连环调用: 否, 这个方法返回的是一个数组。

queryString = $("#basicForm select").fieldValue();alert(queryString.length+queryString[0]+"  "+queryString[1]);

resetForm

通过调用表单原始的内在DOM上的方法吧表单重置成最初状态

是否可以连环调用:是

function reset(){    $("#basicForm").resetForm();}

clearForm

清空表单所有元素的值。这个方法将会清空所有的文本框、密码框、文本域里的值、去掉下拉列表所有被选中的项，让所有的单项框和复选框不再选中

是否可以连环调用:否

$('#myFormId').clearForm();

列子:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script><script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script><script type="text/javascript">$(document).ready(function(){$("#basicForm").ajaxForm(function(){alert("thank you");});var options={beforeSerialize:function($form,options){}};$("#basicForm").submit(function(){$(this).ajaxSubmit();return false;});var queryString ='';//queryString = $("#basicForm").formSerialize();/*$.post('upload.php',queryString);*/queryString = $("#basicForm input[name='username']").fieldSerialize();alert(queryString);//fieldValue--始终都会返回一个数组//queryString = $("#basicForm select").fieldValue();//alert(queryString.length+queryString[0]+"  "+queryString[1]);    function reset(){$("#basicForm").resetForm();}});</script></head><body><b>基本表单测试</b><hr/><form action="upload.php" id="basicForm" method="post">名称:<input type="text" name="username"/><br/>密码:<input type="password" name="password"/><br/>喜欢颜色:<br/><select multiple="multiple" size="5" name="color[]" style="width:100px;"><option value="red">红色</option><option value="black">黑色</option><option value="yellow">黄色</option><option value="green">绿色</option><option value="blue">绿色</option><option value="purple">紫色</option></select><br/>性别:<input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="2"/>女<br/>爱好:<input type="checkbox" name="love" value="lanqiu"/>篮球<input type="checkbox" name="love" value="zuqiu"/>足球<input type="checkbox" name="love" value="kandianying"/>看电影<br/>简介:<textarea rows="5" cols="30" name="intro"></textarea><br/><input type="submit" value="提交" ><input type="button" onclick="reset();" value="重置" /></form></body>