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 二维数组的实现与应用
Mar 16 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
一分钟理解js闭包
May 04 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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执行速度全攻略(下)
2006/10/09 PHP
PHP中用hash实现的数组
2011/07/17 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
TypeScript入门-接口
2017/03/30 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Pytorch之Variable的用法
2019/12/31 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
中学生自我评价范文
2015/03/03 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
生活小常识广播稿
2015/08/19 职场文书