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输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jquery插件实现图片悬浮
Apr 16 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php 破解防盗链图片函数
2008/12/09 PHP
php中的观察者模式
2010/03/24 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
JS二分查找算法详解
2017/11/01 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
python计算圆周率pi的方法
2015/07/11 Python
bpython 功能强大的Python shell
2016/02/16 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
超市业务员岗位职责
2013/12/05 职场文书
二年级语文教学反思
2014/02/02 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
环卫处个人工作总结
2015/03/04 职场文书
被告答辩状范文
2015/05/22 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js