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>

其余关联教程：

jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

jQuery Form 表单提交插件-----ajaxForm() 的应用

jQuery Form 表单提交插件-----ajaxSubmit() 的应用

jQuery Form 表单提交插件-----ajaxForm() 的应用

jQuery Form 表单提交插件-----ajaxSubmit() 的应用

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

jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.

jQuery form插件的使用--使用 fieldValue 方法校验表单

jQuery form插件的使用--处理server返回的JSON， XML，HTML数据