jQuery Form插件使用详解_动力节点Java学院整理


Posted in jQuery onJuly 17, 2017

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

下载地址: http://malsup.com/jquery/form/#download
核心方法 -- ajaxForm() 和 ajaxSubmit()

$('#myForm').ajaxForm(function() {  
 $('#output1').html("提交成功!欢迎下次再来!").show();  
}); 
   
$('#myForm2').submit(function() { 
 $(this).ajaxSubmit(function() {  
  $('#output2').html("提交成功!欢迎下次再来!").show();  
 }); 
 return false; //阻止表单默认提交 
});

通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权

var options = { 
 target: '#output',   //把服务器返回的内容放入id为output的元素中  
 beforeSubmit: showRequest, //提交前的回调函数 
 success: showResponse,  //提交后的回调函数 
 //url: url,     //默认是form的action, 如果申明,则会覆盖 
 //type: type,    //默认是form的method(get or post),如果申明,则会覆盖 
 //dataType: null,   //html(默认), xml, script, json...接受服务端返回的类型 
 //clearForm: true,   //成功提交后,清除所有表单元素的值 
 //resetForm: true,   //成功提交后,重置所有表单元素的值 
 timeout: 3000    //限制请求的时间,当请求大于3秒后,跳出请求 
} 

function showRequest(formData, jqForm, options){ 
 //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}] 
 //jqForm: jQuery对象,封装了表单的元素  
 //options: options对象 
 var queryString = $.param(formData); //name=1&address=2 
 var formElement = jqForm[0];    //将jqForm转换为DOM对象 
 var address = formElement.address.value; //访问jqForm的DOM元素 
 return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证 
}; 
 
function showResponse(responseText, statusText){ 
 //dataType=xml 
 var name = $('name', responseXML).text(); 
 var address = $('address', responseXML).text(); 
 $("#xmlout").html(name + " " + address); 
 //dataType=json 
 $("#jsonout").html(data.name + " " + data.address); 
}; 

$("#myForm").ajaxForm(options); 
 
$("#myForm2").submit(funtion(){ 
 $(this).ajaxSubmit(options); 
 return false; //阻止表单默认提交 
});

表单提交之前进行验证:  beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

beforeSubmit: validate 
function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止 
 //方式一:利用formData参数 
 for (var i=0; i < formData.length; i++) { 
  if (!formData[i].value) { 
   alert('用户名,地址和自我介绍都不能为空!'); 
   return false; 
  } 
 } 
 
 //方式二:利用jqForm对象 
 var form = jqForm[0]; //把表单转化为dom对象 
  if (!form.name.value || !form.address.value) { 
   alert('用户名和地址不能为空,自我介绍可以为空!'); 
   return false; 
  } 

 //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。 
 var usernameValue = $('input[name=name]').fieldValue(); 
 var addressValue = $('input[name=address]').fieldValue(); 
 if (!usernameValue[0] || !addressValue[0]) { 
  alert('用户名和地址不能为空,自我介绍可以为空!'); 
 return false; 
 } 

 var queryString = $.param(formData); //组装数据 
 //alert(queryString); //类似 : name=1&add=2 
 return true; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
You might like
基于mysql的bbs设计(五)
2006/10/09 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python装饰器初探(推荐)
2016/07/21 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python:print格式化输出到文件的实例
2018/05/14 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python Kmeans算法原理深入解析
2019/08/23 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
餐饮业的创业计划书范文
2013/12/26 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
公司经营目标责任书
2015/01/29 职场文书
表彰大会新闻稿
2015/07/17 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python