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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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学习教程之第2天
2008/06/15 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
学生信息管理系统python版
2018/10/17 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
python3.7 的新特性详解
2019/07/25 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Django跨域请求原理及实现代码
2020/11/14 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
公司中层干部的自我评价分享
2014/03/01 职场文书
中学生英语演讲稿
2014/04/26 职场文书
婚前协议书范本
2014/10/27 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
七年级生物教学反思
2016/02/20 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
mysql 获取时间方式
2022/03/20 MySQL