一、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 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 参数校验表单,验证后提交(简单验证).