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 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
页面元素绑定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 setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php-app开发接口加密详解
2018/04/18 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
在Python中使用SQLite的简单教程
2015/04/29 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
python内存动态分配过程详解
2019/07/15 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Python类super()及私有属性原理解析
2020/06/15 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
上班玩手机检讨书
2014/02/17 职场文书
股东协议书范本
2014/04/14 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
java实现面板之间切换功能
2022/06/10 Java/Android