jQuery Form 表單提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的應用

時間 2019-11-13

標籤 jquery form 表單提交插件 formserialize fieldserialize fieldvalue resetform clearform clearfields 應用欄目 JQuery 简体版

原文原文鏈接

1、jQuery Form的其餘api javascript

1. formSerializehtml

將表單序列化成查詢串。這個方法將返回一個形如： name1=value1&name2=value2的字符串。
是否能夠連環調用: 否, 這個方法返回的是一個字符串。java

例子:jquery

var queryString = $('#myFormId').formSerialize(); 

// the data could now be submitted using $.get, $.post, $.ajax, etc 
$.post('myscript.jsp', queryString);

2. fieldSerializeajax

將表單裏的元素序列化成字符串。當你只須要將表單的部分元素序列化時能夠用到這個方法。這個方法將返回一個形如： name1=value1&name2=value2的字符串。
是否能夠連環調用: 否, 這個方法返回的是一個字符串。api

例子:數組

var queryString = $('#myFormId .specialFields').fieldSerialize();

3. fieldValuejsp

取出全部匹配要求的域的值，以數組形式返回。從 0.91 版本開始, 這個方法始終返回一個數組。若是沒有符合條件的域，這個數組將會是個空數組，不然它將會包含至少一個值。
是否能夠連環調用: 否, 這個方法返回的是一個數組。
例子:post

// get the value of the password input 
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

4. resetForm測試

經過調用表單元素的內在的DOM 上的方法把表單重置成最初的狀態。
是否能夠連環調用: 是
例子:

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

5. clearForm

清空表單全部元素的值。這個方法將會清空全部的文本框，密碼框，文本域裏的值，去掉下拉列表全部被選中的項，讓全部複選框和單選框裏被選中的項再也不選中。
是否能夠連環調用: 否

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

6. clearFields

清空某個表單域的值。這個能夠用在只須要清空表單裏部分元素的值的狀況。
是否能夠連環調用: 否

$('#myFormId .specialFields').clearFields();

2、測試的詳細代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery Form 表單提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 應用.</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     
     <!-- 引入依賴的js -->
     <script src="jquery-1.3.1.js" type="text/javascript"></script>
     <script src="jquery.form.js" type="text/javascript"></script>
     
   <script type="text/javascript">          
   $(document).ready(function() {  
        
       $('#test').click(function(){
              var queryString = $('#myForm').formSerialize();
              alert(queryString);
              // 組裝的數據能夠用於 $.get, $.post, $.ajax ...
              $.post('demo.jsp', queryString ,function(data){
                  $('#output1').html("提交成功！歡迎下次再來！").show();      
              }); 
              return false;
         })
         
         //demo2
         $('#test2').click(function(){
              var queryString = $('#myForm2 *').fieldValue(); 
              alert(queryString);
              return false;
         })
         
         //重置表單
         $('#test3').click(function(){
             $('#myForm').resetForm();
             $('#myForm2').resetForm();
         })
         
         //清除表單
         $('#test4').click(function(){
             $('#myForm').clearForm();
             $('#myForm2').clearForm();
         })
         
   });   
   </script> 
  </head>
  
  <body>
    <h3> Demo 3 : jQuery Form 表單提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 應用. </h3>
    
    <!-- demo1 -->
    <form id="myForm" action="demo.jsp" method="post"> 
        名稱： <input type="text" name="name" /> <br/>
        地址： <input type="text" name="address" /><br/> 
        自我介紹： <textarea name="comment"></textarea> <br/>
        <input type="submit" id="test" value="提交" /> <br/>
        <div id="output1" style="display:none;"></div>
    </form>

    <br/><br/><br/>

     <!-- demo2 -->
    <form id="myForm2" action="demo.jsp" method="post"> 
        名稱： <input type="text" name="name2" class="special"/> <br/>
        地址： <input type="text" name="address2" /><br/> 
        自我介紹： <textarea name="comment2" class="special"></textarea> <br/>
        單選：男<input type="radio" name="a" value="男" checked/> 
                      女<input type="radio" name="a" value="女"/><br/>
           <input type="submit" id="test2" value="提交" /> <br/>
    </form>

     <br/><br/><br/>
     
    <input type="button" id="test3" value="重置全部表單" /> <br/>
    <input type="button" id="test4" value="清除全部表單" /> （提示：發現單選框之前選中的，也被清除了，跟重置有點區別！）<br/>


  </body>
</html>

demo.jsp 代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防止亂碼!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + "  " +address + "  " +comment);
%>

3、測試效果：

1. formSerialize（）測試效果:

空的時候：