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

我很懒。当我做网络时，我想找到一种方法来节省时间和精力，当我不得不重复同一件事很多次的时候。以前在网上提交表单，验证用户输入时，js中使用document.getElementById()提取用户输入信息，一两个表单域就可以了，但是很多时候(我遇到过十几个案例)，我眼花缭乱，所以我个人很反感这种方式。还好我自己琢磨了一下，用jquery找到了一个方便的方法。我在每个需要提交数据的表单字段中增加了一个额外的属性，用自己定义的属性“_postField”替换了原来的name属性，比如input type=' text ' _ postField=' name '/input type=' radio ' _ postField=' sex '/等等。然后使用query获取所有带有_postField属性的dom对象，遍历它们，并以_postField的值为键，其内容为值，将它们打包成json键值对。js方法如下：复制代码代码如下： Script Type=' text/JavaScript函数getformfield(sel){ varobjs=$(' *[' sel ']')；var PostDATa={ }；for(var i=0，len=objs.length伊琳；I){ var obj=objs[I]；var nodeName=obj . nodeName . tolowercase()；var字段=$(obj)。attr(sel)；if(nodeName==' input '){ if(obj . type . trim()==' radio '(obj . checked | | obj . checked==' checked '){ PostDATa[field]=$(obj)。val()；继续；} if(obj . type . trim()==' checkbox '(obj . checked | | obj . checked==' checked '){ var ov=PostDATa[field]| | ' '；var nv=ov '，' $(obj)。val()；postData[field]=nv.replace(/^，/，' ')；继续；} if(obj . type . trim()==' text ' | | obj . type . trim()==' hidden '){ PostDATa[field]=$(obj)。val()；继续；}继续；} if(nodeName==' text area '){ PostDATa[field]=$(obj)。val()；继续；} if(nodeName==' select '){ var val=obj . options[obj . selectedindex]。价值；post DATa[field]=val；继续；} postData[field]=$(obj)。html()；}//返回从表单获取的json数据返回postData} /script测试代码：复制的代码如下： form style=' margin-left :200 px；margin-top :300 px；输入类型=' text '值=' ' _ postField=' name '/br/br/input type=' radio '值='男'名='sex' _postField='sex'/男输入类型='radio '值='女'名='sex'/女输入类型=' radio '值=' neutral '名=' sex ' _ postField=' sex '/neutral br/br/Select _ postField=' job '选项值='上班'/选项值=' beg' beg '//表单脚本函数test(){ var post data=getFormField(' _ postField ')；var sb=[]；for(PostDATa中的var o){ sb . push(o '=' PostDATa[o])；} alert(sb . join(' \ n ')；}/脚本

上面的例子中表单字段很少，有些东西体现不出来，但是当表单字段数量比较多的时候，可以体现出它的便捷性和良好的复用性；此外，如果使用jquery进行异步提交，将节省手工封装json数据的操作。有些人可能不想在表单字段中添加像“_postField”这样的自定义字段，所以他们可以只使用自己的名称。这只是jquery选择器的使用不同，但本质还是一样的。