在使用ajax處理相關(guān)數(shù)據(jù)時(shí)，用到了jquery獲得所有表單項(xiàng)目的數(shù)據(jù)內(nèi)容并進(jìn)行傳遞給對應(yīng)動態(tài)頁面處理。
以下是相關(guān)的全部演示代碼jquery表單數(shù)據(jù)序列化的各種問題與解決方案
以及對于serialize與serializeArray的區(qū)別分析
在用jquery獲得checkbox表單相關(guān)數(shù)據(jù)時(shí)會有bug，我也對其中的bug給了演示，方便觀看bug的效果，然后給出了對應(yīng)解決方案
以下是演示代碼產(chǎn)生的console.log反饋
以下是jquery獲得表單里面的表單內(nèi)容數(shù)據(jù)的代碼
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>深山在線表單系統(tǒng)</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
function qwbm_save_biaodan(){
var form_alldata = $('#qwbm_biaodan_form1').serialize();
console.log(form_alldata);
console.log(JSON.stringify(form_alldata));
//這個(gè)代碼只要遇到checkbox表單項(xiàng)目時(shí)就會出錯(cuò),導(dǎo)致只能獲得最后一個(gè)項(xiàng)目內(nèi)容
var d = {};
var t = $('#qwbm_biaodan_form1').serializeArray();
//t的值為[{name: "a1", value: "xx"},
$.each(t, function(){
d[this.name] = this.value;
});
console.log(d);
//處理checkbox表單項(xiàng)目時(shí),會將對應(yīng)內(nèi)容歸入數(shù)組
var o = {};
var a = $('#qwbm_biaodan_form1').serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
console.log(o);
console.log(JSON.stringify(o));
var form_alldata = JSON.stringify(serializeObject($("#qwbm_biaodan_form1")));
console.log(form_alldata);
}
//序列化form表單
function serializeObject(form){
var o = {};
$.each(form.serializeArray(),function(index){
if(o[this['name']]){
o[this['name']] = o[this['name']] + ","+this['value'];
}else{
o[this['name']] = this['value'];
}
});
return o;
}
</script>
</head>
<body>
<form id="qwbm_biaodan_form1" name="qwbm_biaodan_form1" method="post" action="#">
<input class='bd_it_input1' name="qwbm_e3a6db9d6fb72b99" type="text" id="qwbm_e3a6db9d6fb72b99" value="" maxlength="5" placeholder="填寫你的名稱">
<textarea class='bd_it_textarea1' name="qwbm_omhrmiot" id="qwbm_omhrmiot" value="" placeholder="請?zhí)顚懕M量多的內(nèi)容" style=""></textarea>
<ul><li><label for="qwbm_kicmidkp1"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp1" value="第一個(gè)項(xiàng)目"><em>第一個(gè)項(xiàng)目</em></label></li><li><label for="qwbm_kicmidkp2"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp2" value="第二個(gè)項(xiàng)目"><em>第二個(gè)項(xiàng)目</em></label></li><li><label for="qwbm_kicmidkp3"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp3" value="第三個(gè)項(xiàng)目"><em>第三個(gè)項(xiàng)目</em></label></li><li><label for="qwbm_kicmidkp4"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp4" value="第四個(gè)項(xiàng)目" checked='checked'><em>第四個(gè)項(xiàng)目</em></label></li><li><label for="qwbm_kicmidkp5"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp5" value="第五個(gè)項(xiàng)目"><em>第五個(gè)項(xiàng)目</em></label></li></ul>
<ul class='bd_it_checkulbox bd_it_checkulonefonttr'><li><label for="qwbm_jhcmhdjo1"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo1" value="汽車"><em>汽車</em></label></li><li><label for="qwbm_jhcmhdjo2"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo2" value="飛機(jī)"><em>飛機(jī)</em></label></li><li><label for="qwbm_jhcmhdjo3"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo3" value="飛船" checked='checked'><em>飛船</em></label></li><li><label for="qwbm_jhcmhdjo4"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo4" value="自行車"><em>自行車</em></label></li><li><label for="qwbm_jhcmhdjo5"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo5" value="轎車" checked='checked'><em>轎車</em></label></li><li><label for="qwbm_jhcmhdjo6"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo6" value="海軍"><em>海軍</em></label></li><li><label for="qwbm_jhcmhdjo7"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo7" value="摩托車"><em>摩托車</em></label></li><li><label for="qwbm_jhcmhdjo8"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo8" value="飛碟"><em>飛碟</em></label></li><li><label for="qwbm_jhcmhdjo9"><input type="checkbox" name="qwbm_jhcmhdjo" id="qwbm_jhcmhdjo9" value="導(dǎo)彈"><em>導(dǎo)彈</em></label></li></ul>
<select name="qwbm_igzkfbin" id="qwbm_igzkfbin" class='bd_it_selectulbox'><option value="第 1 個(gè)產(chǎn)品好">第 1 個(gè)產(chǎn)品好</option><option value="第 2 個(gè)產(chǎn)品好">第 2 個(gè)產(chǎn)品好</option><option value="第 3 個(gè)產(chǎn)品好">第 3 個(gè)產(chǎn)品好</option><option value="第 4 個(gè)產(chǎn)品好" selected='selected'>第 4 個(gè)產(chǎn)品好</option><option value="第 5 個(gè)產(chǎn)品好">第 5 個(gè)產(chǎn)品好</option></select>
<input class='bd_it_submit1' type='button' value="提交保存數(shù)據(jù)" onclick="qwbm_save_biaodan();" />
</form>
</body>
</html>
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權(quán)益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對自己在本站的言論和行為負(fù)責(zé);
三、本站對您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號