jquery 插件 - 表单(Form)插件

华锦
2023-12-01

Jquery Form Pluginjquery 最重 要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法:ajaxformajaxsubmit 。 它会自动收集表单元素内容,决定如何管理提交进程。这两个方法支持多重选择。我想AJAX方式的表单应用再没有比这个插件更简单易用的了。

先在页面里设置一个普通的表单:

HTML:
  1. <form id ="myForm" action ="comment.php" method ="post" >
  2. 姓名: <input type ="text" name ="name" id ="name" />
  3. 评论: <textarea name ="comment" id ="comment" > </textarea>
  4. <input type ="submit" value ="提交评论" />
  5. </form>

加载jquery库和插件脚本库。然后简单地写一段初始化脚本,这段脚本将在DOM加载完成时执行:

HTML:
  1. <script type ="text/javascript" src ="jquery.js" > </script>   //加载jquery
  2. <script type ="text/javascript" src ="form.js" > </script>     //加载插件
  3. <script type ="text/javascript" >
  4. // DOM加载完毕后执行
  5.  $(document).ready(function() {
  6. // 绑定'myForm'并定义一个简单的回调函数
  7. $('#myForm').ajaxForm(function() {
  8. alert("评论提交完成!");
  9. });
  10. });
  11. </script>
  12. </head>

OK,就是这么简单。当点击“提交评论”按钮后,表单的数据就会POST到comment.php脚本,并且返回“评论提交完成”信息(如果提交成 功)。页面并没有刷新,非常AJAX……

让我们来看看这个插件还有什么强大的功能。

ajaxForm

该方法须预先绑定表单,所以它一般在$(document).ready(function() { ...}里定义。它能让表单在不刷新页面的情况下POST到目标。可以为该方法提供一个参数,参数一般是一个回调函数用于返回信息给用户。当然如果不提供 参数也行,只是表单提在无声无息地提交后无法得到确认了。

ajaxSubmit

该方法是以响应事件来通用AJAX方式提交表单。比如点击某个按钮或改变了某个下拉框的值,在触发事件函数里可以设置该方法。如:

JavaScript:
  1. $ ( "#clickme" ) . click ( function ( ) {
  2. $ ( "#myForm" ) . ajaxSubmit ( ) ;
  3. } ) ;

或者这样:

HTML:
  1. <select id ="mySelect" onchange ="$(‘#myForm’).ajaxSubmit();" >

 

formSerialize

该方法可以表单域的名称和值连接起来,形成一个字符串,字符串格式为name1=value1&name2=value2...比如:

JavaScript:
  1. var queryString=$ ( "#myForm" ) . formSerialize ( ) ;

变量queryString的值将为变成name=xxx&comment=xxx。得到这个字符串后,可以用$.post来提交, 如:$.post("comment.php",queryString);

fieldSerialize

和formSerialize一样,返回一个字符串,但返回的是表单指定元素或特定元素类型域的字符串。返回字符串格式也是一样的。如:

JavaScript:
  1. var queryString = $ ( '#myForm :text' ) . fieldSerialize ( ) ; //返回myForm表单内所有文本框的字 符串值。

 

fieldValue

返回一个数组,记录表单元素的值。如果表单没有值则对应数组值为空。如:

JavaScript:
  1. var data=$ ( ':text' ) . fieldValue ( ) ; //返回所有表单中所有文本框类型的值。

变量data为['','','']这样的一个数组,数组元素对应表单元素的值。事实上我们可以这样来得到“姓名”文本框里的值:var data=$("#name").val();(这个元素要有ID属性)这样的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得单个或多个表单中特定元素域的值。比如取得所有文本框或所有复选框的值。只要加个“:"就可以。这 种方法也可以用到formSerialize或fieldSerialize方法上。

JavaScript:
  1. var data=$ ( "#myForm :text" ) . fieldValue ( ) ; //取得在myForm表单里所有文本框的 值。

 

formToArray

同样也返回一个数组,这个数组是对象数组。对象有name和value两个属性,分别记录表单中的元素名称和元素值。如:

JavaScript:
  1. var data=$ ( "#myForm" ) . formToArray ( ) ;

变量data得到的是一个对象数组。data[0].name保存myForm表单中第一个表单元素的名称属性值,这里是”name"。 data[0].value保存myForm表单中第一个表单元素的值,这里就是填了什么值就是什么。

resetForm

该方法很简单啦,恢复表单初始状态。也就恢复到DOM加载完成时的表单状态。类似“重设表单”

clearFields

清除表单域元素。可以清除特定类型的域元素,比如清除所有文本框的,或所有复选框的域。

 

更多实例:http://malsup.com/jquery/form

 类似资料: