一、jQuery Form简介

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit()， 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法： formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。

插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。这让采用AJAX方式提交一个表单的过程简单的不能再简单了！

二、下载地址

下载地址： http://malsup.com/jquery/form/#download

Github主页： https://github.com/malsup/form

网盘下载：https://yunpan.cn/crjzfmXqaTu9e  访问密码 e3bc

三、资料

中文在线文档：http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html

英文在线文档：http://jquery.malsup.com/form/

四、简单的体验例子

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  : 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数据

jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址的更多相关文章

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

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  2. jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

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

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍  立即通过AJ ...

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

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxForm() 介绍  ajaxForm ...

  5. Jquery组织Form表单提交之Form submission canceled because the form is not connected

    有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接), ...

  6. Linux curl 模拟form表单提交信息和文件

    Linux curl 模拟form表单提交信息和文件   curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大 ...

  7. jqPaginator分页（ajax用法和form表单提交用法）

    一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  8. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  9. jQuery补充之jQuery扩展/form表单提交/滚动菜单

    jQuery扩展 为了避免重复造轮子,能高效使用别人的代码,所以有了扩展. jQuery扩展有两种方式: 自执行函数方式 定义函数,并执行函数. 自执行函数: (function(jq){ jq.ex ...

随机推荐

  1. Sprint第三个冲刺（第五天）

    一.Sprint介绍 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  2. C#中方法的调用

    C#中方法的调用 1.同一个类中方法的调用: 静态方法可以直接调用静态方法 静态方法不能直接调用非静态方法,静态方法先生成. 非静态方法可以直接调用静态方法 如果静态方法要调用非静态的方法,必须使用实 ...

  3. 以对象的方式来访问xml数据表（三）

    怎样以对象的方式来访问xml数据表? 在讲如何具体实现(二)中所说的专门用于访问xml文件的动态链接库之前,我们先来看看这个动态链接库具体要实现什么功能. 动态链接库IXmlDB.dll的功能: 1. ...

  4. edittext 监听内容变化

    给EditText追加ChangedListener可以监听EditText内容变化的监听 如图是效果图  类似于过滤的一种实现 1  布局也就是一个EditText,当EditText内容发生变化时 ...

  5. 【iOS】Quartz2D绘图路径Path

    一.绘图路径 A.简单说明 在画线的时候,方法的内部默认创建一个path.它把路径都放到了path里面去. 1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径,这个路径用 ...

  6. 以Self Host的方式来寄宿Web API

    Common类及实体定义.Web API的定义请参见我的上一篇文章:以Web Host的方式来寄宿Web API. 一.以Self Host寄宿需要新建一个Console控制台项目(SelfHost) ...

  7. postgresql 9.6 rc1发布

    postgresql 9.6 rc1发布了,意味着postgresql 9.6正式版将会越来越近了. 对于dss来说,postgresql远优于mysql,尤其是9.6新引入的并行执行,将大大提高性能 ...

  8. Mysql进阶（二）

    一.触发器 对某个表进行[增/删/改]操作的前后如果希望触发某个特定的行为时,可以使用触发器,触发器用于定制用户对表的行进行[增/删/改]前后的行为. 创建视图 # 插入前CREATE TRIGGER ...

  9. SAP数据更新的触发

    SAP 应用系统架构         应用层运行着DIALOG进程,每个DIALOG进程绑定一个数据库进程,DIALOG进程与GUI进行通信,每次GUI向应用服务器发送请求时都会通过dispatche ...

  10. github 基础教程推荐

    github现在很火的样子 我在一篇博客上看到说“如果你不知道什么是github,那你就不能说你是个coder,如果你现在看到这篇博客,那么你已经是个coder了”. 我对github一直很好奇,可是 ...