jquery选择符快速提取web表单数据示例


Posted in Javascript onMarch 27, 2014

本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法。

以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法。

我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name属性,比如<input type="text" _postField="name" /><input type="radio" _postField="sex" />之类,然后用query获取所有存在_postField属性的dom对象,并进行遍历,封装成以_postField的值为key,其内容为value的json键值对,其js的方法如下:

<script type="text/javascript> 
function getFormField(sel){ 
var objs = $("*["+sel+"]"); 
var postData = {}; 
for(var i=0,len=objs.length;i<len;i++){ 
var obj = objs[i]; 
var nodeName = obj.nodeName.toLowerCase(); 
var field = $(obj).attr(sel); if(nodeName=="input"){ 
if(obj.type.trim()=="radio"&&(obj.checked||obj.checked=="checked")){ 
postData[field] = $(obj).val(); 
continue; 
} 
if(obj.type.trim()=="checkbox"&&(obj.checked||obj.checked=="checked")){ 
var ov = postData[field]||""; 
var nv = ov+","+$(obj).val(); 
postData[field] = nv.replace(/^,+/,""); 
continue; 
} 
if(obj.type.trim()=="text"||obj.type.trim()=="hidden"){ 
postData[field] = $(obj).val(); 
continue; 
} 
continue; 
} 
if(nodeName=="textarea"){ 
postData[field] = $(obj).val(); 
continue; 
} 
if(nodeName=="select"){ 
var val = obj.options[obj.selectedIndex].value; 
postData[field] = val; 
continue; 
} 
postData[field] = $(obj).html(); 
} 
//返回从表单获取数据的json数据 
return postData; 
} 
</script>

测试代码:
<form style="margin-left:200px; margin-top:300px;"> 
<input type="text" value="" _postField="name" /><br /><br /> 
<input type="radio" value="男" name="sex" _postField="sex" />男 
<input type="radio" value="女" name="sex" _postField="sex" />女 
<input type="radio" value="中性" name="sex" _postField="sex" />中性 <br /><br /> 
<select _postField="job"> 
<option value="上班">上班</option> 
<option value="讨饭">讨饭</option> 
<option value="啥都不相干">啥都不相干</option> 
</select> 
<br /><br /> 
<input type="button" value=" OK " onclick="test();" /> 
</form> 
<script> 
function test(){ 
var postData = getFormField("_postField"); var sb = []; 
for(var o in postData){ 
sb.push(o+"="+postData[o]); 
} 
alert(sb.join("\n")); 
} 
</script>

jquery选择符快速提取web表单数据示例 

以上例子的表单域比较少,一些东西体现不出,但当表单域的数量比较多少时,就能体现出其方便性,而且重用性较好;再者,如果用jquery异步提交的话,连手动封装json数据的操作都省了。
也有人可能不愿意给表单域增加类似“_postField”的自定义字段,那就直接用本身就有的name也行,这只是jquery选择符的使用不同,其实质还是一样的。

Javascript 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
Vue formData实现图片上传
Aug 20 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 #Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 #Javascript
js弹出确认是否删除对话框
Mar 27 #Javascript
js或jquery实现页面打印可局部打印
Mar 27 #Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 #Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 #Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 #Javascript
You might like
如何在PHP中进行身份认证
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
node网页分段渲染详解
2016/09/05 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python将unicode转为str的方法
2017/06/21 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
优秀生推荐信范文
2013/11/28 职场文书
行政总经理岗位职责
2013/12/05 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
安全保证书
2015/01/16 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP