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跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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设计模式 Builder(建造者模式)
2011/06/26 PHP
PHP安全配置详细说明
2011/09/26 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
使用python turtle画高达
2020/01/19 Python
python打包多类型文件的操作方法
2020/09/21 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
办公室经理岗位职责
2014/01/01 职场文书
挂牌仪式主持词
2014/03/20 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
课外访万家心得体会
2014/09/03 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
冰峪沟导游词
2015/02/09 职场文书
党员读书活动心得体会
2016/01/14 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
基于python实现银行管理系统
2021/04/20 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
SQL Server中使用表变量和临时表
2022/05/20 SQL Server