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 相关文章推荐
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 Javascript
小程序实现发表评论功能
Jul 06 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
vue-cli中实现响应式布局的方法
Mar 02 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
PHP-Java-Bridge使用笔记
2014/09/22 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
介绍Python中的__future__模块
2015/04/27 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Python简易版图书管理系统
2019/08/12 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
Linux机考试题
2015/10/16 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
档案检查欢迎词
2014/01/13 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
投资建议书模板
2014/05/12 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
质量承诺书格式范文
2015/04/28 职场文书
热爱劳动主题班会
2015/08/14 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
python实现图片九宫格分割的示例
2021/04/25 Python
详解MySQL中的主键与事务
2021/05/27 MySQL
MySQL中日期型单行函数代码详解
2021/06/21 MySQL