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 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 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
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
详解Python中的文本处理
2015/04/11 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
房屋出售协议书
2014/04/10 职场文书
个人总结与自我评价
2014/09/18 职场文书
房贷工资证明范本
2015/06/12 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
分析Python list操作为什么会错误
2021/11/17 Python