jQuery Form 表單提交插件----Form 簡介，官方文檔，官方下載地址

時間 2019-11-18

標籤 jquery form 表單提交插件簡介官方文檔下載地址欄目 JQuery 简体版

原文原文鏈接

1、jQuery Form簡介javascript

jQuery Form插件是一個優秀的Ajax表單插件，能夠很是容易地、無侵入地升級HTML表單以支持Ajax。jQuery Form有兩個核心方法 -- ajaxForm() 和 ajaxSubmit()，它們集合了從控制表單元素到決定如何管理提交進程的功能。另外，插件還包括其餘的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。html

jQuery Form Plugin 可以讓你簡潔的將以HTML形式提交的表單升級成採用AJAX技術提交的表單。java

插件裏面主要的方法, ajaxForm 和 ajaxSubmit, 可以從form組件裏採集信息肯定如何處理表單的提交過程。兩個方法都支持衆多的可選參數，可以讓你對錶單裏數據的提交作到徹底的控制。這讓採用AJAX方式提交一個表單的過程簡單的不能再簡單了！jquery

2、下載地址git

下載地址： http://malsup.com/jquery/form/#downloadgithub

Github主頁： https://github.com/malsup/form ajax

網盤下載：https://yunpan.cn/crjzfmXqaTu9e 訪問密碼 e3bc服務器

3、資料jsp

中文在線文檔：http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.htmlpost

英文在線文檔：http://jquery.malsup.com/form/

4、簡單的體驗例子

1. 在你的頁面裏寫一個表單。一個普通的表單，不須要任何特殊的標記：

<form id="myForm" action="comment.jsp" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

2. 引入jQuery和Form Plugin Javascript腳本文件而且添加幾句簡單的代碼讓頁面在DOM加載完成後初始化表單：

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

或是經過CDN：

<script src="http://malsup.github.io/jquery.form.js" type="text/javascript"></script>

<script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>

<script src="http://malsup.github.io/min/jquery.form.min.js"></script>

而後編寫頁面：

<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>

3. 當表單提交後name ，address 和 comment的值就會被提交給demo.jsp. 若是服務器端返回成功的狀態，用戶將會看到一句提示信息 "Thank you" 。

詳細代碼以下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title>demo1.html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <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() {  
           $('#myForm').ajaxForm(function() {   
               $('#output1').html("提交成功！歡迎下次再來！").show();    
           });   
   });   
   </script> 
  </head>
  
  <body>
    <h3> Demo 1 : form插件的使用--ajaxForm(). </h3>
    <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>
  </body>
</html>