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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
JavaScript表单验证开发
Nov 23 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
重置版战役片段
2020/04/09 魔兽争霸
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
JS实现多功能计算器
2020/10/28 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python交互式图形编程实例(一)
2017/11/17 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python3让print输出不换行的方法
2020/08/24 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
乔迁宴答谢词
2014/01/21 职场文书
上课说话检讨书大全
2014/01/22 职场文书
好的促销活动方案
2014/08/21 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
电频谱管理的原则是什么
2022/02/18 无线电
PHP 时间处理类Carbon
2022/05/20 PHP