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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
Angular2 组件交互实例详解
2017/08/24 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
vue ssr 指南详读
2018/06/29 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
NumPy统计函数的实现方法
2020/01/21 Python
python实现五子棋程序
2020/04/24 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
医院门卫岗位职责
2013/12/30 职场文书
初中英语教学反思
2014/01/25 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
售后服务承诺书
2014/03/26 职场文书
求职意向书
2014/04/01 职场文书
调解协议书
2014/04/16 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书