jquery選擇符快速提取web表單數(shù)據(jù)示例
更新時(shí)間:2014年03月27日 16:42:22 作者:
遇到要重復(fù)多次同樣的事時(shí),就想找一種省時(shí)省力的方法,下面就為大家介紹下利用jquery選擇符快速提取web表單數(shù)據(jù)
本人比較懶,在做web時(shí),當(dāng)遇到要重復(fù)多次同樣的事時(shí),就想找一種省時(shí)省力的方法。
以前在web提交表單并且需要驗(yàn)證用戶輸入時(shí),在提取用戶輸入信息時(shí),都要在js用到document.getElementById(),這樣一個(gè)兩個(gè)表單域還行,但有很多時(shí)(我就遇到過(guò)有十幾個(gè)的情況)看看都眼花,所以個(gè)人就比較反感這種方式,不過(guò)還好,我自己瞎琢磨,利用jquery找到了一種方便的方法。
我給需要提交數(shù)據(jù)每個(gè)表單域添加了一個(gè)額外的屬性,用自己額外定義的屬性"_postField"代替原來(lái)的name屬性,比如<input type="text" _postField="name" /><input type="radio" _postField="sex" />之類,然后用query獲取所有存在_postField屬性的dom對(duì)象,并進(jìn)行遍歷,封裝成以_postField的值為key,其內(nèi)容為value的json鍵值對(duì),其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();
}
//返回從表單獲取數(shù)據(jù)的json數(shù)據(jù)
return postData;
}
</script>
測(cè)試代碼:
<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>
以上例子的表單域比較少,一些東西體現(xiàn)不出,但當(dāng)表單域的數(shù)量比較多少時(shí),就能體現(xiàn)出其方便性,而且重用性較好;再者,如果用jquery異步提交的話,連手動(dòng)封裝json數(shù)據(jù)的操作都省了。
也有人可能不愿意給表單域增加類似“_postField”的自定義字段,那就直接用本身就有的name也行,這只是jquery選擇符的使用不同,其實(shí)質(zhì)還是一樣的。
以前在web提交表單并且需要驗(yàn)證用戶輸入時(shí),在提取用戶輸入信息時(shí),都要在js用到document.getElementById(),這樣一個(gè)兩個(gè)表單域還行,但有很多時(shí)(我就遇到過(guò)有十幾個(gè)的情況)看看都眼花,所以個(gè)人就比較反感這種方式,不過(guò)還好,我自己瞎琢磨,利用jquery找到了一種方便的方法。
我給需要提交數(shù)據(jù)每個(gè)表單域添加了一個(gè)額外的屬性,用自己額外定義的屬性"_postField"代替原來(lái)的name屬性,比如<input type="text" _postField="name" /><input type="radio" _postField="sex" />之類,然后用query獲取所有存在_postField屬性的dom對(duì)象,并進(jìn)行遍歷,封裝成以_postField的值為key,其內(nèi)容為value的json鍵值對(duì),其js的方法如下:
復(fù)制代碼 代碼如下:
<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();
}
//返回從表單獲取數(shù)據(jù)的json數(shù)據(jù)
return postData;
}
</script>
測(cè)試代碼:
復(fù)制代碼 代碼如下:
<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>

以上例子的表單域比較少,一些東西體現(xiàn)不出,但當(dāng)表單域的數(shù)量比較多少時(shí),就能體現(xiàn)出其方便性,而且重用性較好;再者,如果用jquery異步提交的話,連手動(dòng)封裝json數(shù)據(jù)的操作都省了。
也有人可能不愿意給表單域增加類似“_postField”的自定義字段,那就直接用本身就有的name也行,這只是jquery選擇符的使用不同,其實(shí)質(zhì)還是一樣的。
相關(guān)文章
jquery+php隨機(jī)生成紅包金額數(shù)量代碼分享
這篇文章主要介紹了jquery+php隨機(jī)生成紅包金額數(shù)量實(shí)現(xiàn)代碼,紅包數(shù)量與金錢可以自己設(shè)定,很實(shí)用的代碼,推薦給大家,有需要的小伙伴可以參考下。2015-08-08jQuery避免$符和其他JS庫(kù)沖突的方法對(duì)比
jQuery中需要用到$符號(hào),如果其他js庫(kù)也定義了$符號(hào),那么就會(huì)造成沖突,會(huì)影響到j(luò)s代碼的正常執(zhí)行,下面有幾個(gè)不錯(cuò)的解決方法,大家可以參考下2014-02-02jQuery實(shí)現(xiàn)只允許輸入數(shù)字和小數(shù)點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)只允許輸入數(shù)字和小數(shù)點(diǎn)的方法,涉及jQuery針對(duì)鍵盤事件的響應(yīng)及字符串操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03JQuery Study Notes 學(xué)習(xí)筆記(一)
jquery是當(dāng)前比較流行的js類庫(kù),學(xué)習(xí)它可以實(shí)現(xiàn)很多功能。2010-08-08jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實(shí)例形式分析了jQuery的ajax前端調(diào)用及后臺(tái)交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實(shí)例共讀者下載,需要的朋友可以參考下2015-12-12jquery blockUI 遮罩不能消失與不能提交的解決方法
jquery blockUI 遮罩不能消失與不能提交的解決方法,使用jquery blockUI的朋友可以參考下。2011-09-09