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

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



PLAIN TEXT



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加载完成时执行：



    PLAIN TEXT



    HTML: 

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



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

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

    ajaxForm

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

    ajaxSubmit

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



    PLAIN TEXT



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



    或者这样：



    PLAIN TEXT



    HTML:

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



     

    formSerialize

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



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



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

    fieldSerialize

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



    PLAIN TEXT


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


     

    fieldValue

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



    PLAIN TEXT



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



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



    PLAIN TEXT



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



     

    formToArray

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



    PLAIN TEXT



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



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

    resetForm

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

    clearFields

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