jQuery中验证表单提交方式及序列化表单内容的实现


Posted in Javascript onJanuary 06, 2014

之前项目中使用的表单提交方式

使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中

function addSubmit(){ 
$('#addForm').form('submit', { 
url : _basePath + '/@Controller/@RequestMapping', 
onSubmit : function() { 
if(boolean){//放置能否提交的判断条件 
$.messager.show({ 
title:'提示',msg:'不符合保存条件', 
showType:'fade',style:{right:'',bottom:''} 
}); 
return false;//阻止表单提交 
} 
return $('#addForm').form('validate');//判断required项是否全部有值 
}, 
success : function(data) { 
var obj = jQuery.parseJSON(data);//将返回的JSON转化为所需对象(ResponseData) 
if (!obj.success) {//判断返回的ResponseData对象中标示状态的属性值 
$.messager.show({ 
title:'提示',msg:'保存失败', 
showType:'fade',style:{right:'',bottom:''} 
}); 
} else { 
$.messager.show({ 
title:'提示',msg:'保存成功', 
showType:'fade',style:{right:'',bottom:''} 
}); 
$("#addWin").window("close");//关闭提交pwkk 
query();//刷新结果集 
} 
} 
}); 
}

今天在《锋利的jQuery》中又读到这样一种提交方式,使用ajax封装了表单内容用post提交
$("#btn").click(function() { 
$.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//将表单中的数据逐条取出后封装上传 
$("#target").html(data);//将返回值填充至页面中 
}); 
});

而后有一个简化版,使用serialize()方法序列化
$("#btn").click(function() { 
$.get("get.php", $("#form").serialize(), function(data, textStatus) {//将表单中的数据逐条取出后封装上传 
$("#target").html(data);//将返回值填充至页面中 
}); 
});

serialize()方法可以自动编码,而且除表单之外的如checkbox等对象也可以使用其进行转换

同时还有serializeArray()方法可以将元素序列化后返回数组形式的JSON对象,而非JSON字符串

即无需使用jQuery.parseJSON()方法进行转换

返回值可直接使用类似$.each()等方法进行操作使用

Javascript 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
一个JS翻页效果
Jul 23 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
js模拟实现烟花特效
Mar 10 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 #Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 #Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 #Javascript
instanceof和typeof运算符的区别详解
Jan 06 #Javascript
jquery使用append(content)方法注意事项分享
Jan 06 #Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 #Javascript
Javascript 遍历页面text控件详解
Jan 06 #Javascript
You might like
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
js运动事件函数详解
2016/10/21 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python中的列表推导浅析
2014/04/26 Python
Python里隐藏的“禅”
2014/06/16 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python如何求解两数的最大公约数
2018/09/27 Python
python导入坐标点的具体操作
2019/05/10 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
项目经理岗位职责
2013/11/11 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
工程进度款催款函
2015/06/24 职场文书
女性健康讲座主持词
2015/07/04 职场文书
中学总务处工作总结
2015/08/12 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL