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 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
vue数字类型过滤器的示例代码
Sep 07 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
vue生命周期的探索
Apr 03 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 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实现var_export的详细介绍
2013/06/20 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
2020/04/27 Javascript
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python退火算法在高次方程的应用
2018/07/26 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
个人简历中的自我评价怎么写
2014/01/26 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
补充协议书范本
2014/04/23 职场文书
团日活动总结书格式
2014/05/08 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js