訂閱本欄目 RSS您所在的位置: 深山工作室 > HTML > 正文

jquery獲得當前所有input表單數據并進行序列化的各種問題與解決方案serialize與serializeArray的區別分析

2022/2/24 15:39:57 字體: 瀏覽 753

在使用ajax處理相關數據時,用到了jquery獲得所有表單項目的數據內容并進行傳遞給對應動態頁面處理。
以下是相關的全部演示代碼jquery表單數據序列化的各種問題與解決方案
以及對于serializeserializeArray的區別分析
在用jquery獲得checkbox表單相關數據時會有bug,我也對其中的bug給了演示,方便觀看bug的效果,然后給出了對應解決方案

以下是演示代碼產生的console.log反饋



以下是jquery獲得表單里面的表單內容數據的代碼
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>深山在線表單系統</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));

//這個代碼只要遇到checkbox表單項目時就會出錯,導致只能獲得最后一個項目內容
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表單項目時,會將對應內容歸入數組
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="請填寫盡量多的內容" style=""></textarea>

<ul><li><label for="qwbm_kicmidkp1"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp1" value="第一個項目"><em>第一個項目</em></label></li><li><label for="qwbm_kicmidkp2"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp2" value="第二個項目"><em>第二個項目</em></label></li><li><label for="qwbm_kicmidkp3"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp3" value="第三個項目"><em>第三個項目</em></label></li><li><label for="qwbm_kicmidkp4"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp4" value="第四個項目" checked='checked'><em>第四個項目</em></label></li><li><label for="qwbm_kicmidkp5"><input type="radio" name="qwbm_kicmidkp" id="qwbm_kicmidkp5" value="第五個項目"><em>第五個項目</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="飛機"><em>飛機</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="導彈"><em>導彈</em></label></li></ul>

<select name="qwbm_igzkfbin" id="qwbm_igzkfbin" class='bd_it_selectulbox'><option value="第 1 個產品好">第 1 個產品好</option><option value="第 2 個產品好">第 2 個產品好</option><option value="第 3 個產品好">第 3 個產品好</option><option value="第 4 個產品好" selected='selected'>第 4 個產品好</option><option value="第 5 個產品好">第 5 個產品好</option></select>

<input class='bd_it_submit1' type='button' value="提交保存數據" onclick="qwbm_save_biaodan();" />

</form>
</body>
</html>

相關閱讀
長城國際集團有限公司
純CSS制作的網頁中的lightbox效果
安康藍天旅行社官網
126郵箱TAB效果(同一頁面可多次使用)
背景調色板:狀態欄還能顯示顏色值
python里面requests.post返回的res.text還有其它的嗎
web版的js正則工具
超級實用且不花哨的js代碼大全( 7 )
共有0條關于《jquery獲得當前所有input表單數據并進行序列化的各種問題與解決方案serialize與serializeArray的區別分析》的評論
發表評論
正在加載評論......
返回頂部發表評論
呢 稱:
表 情:
內 容:
評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼: 驗證碼 
網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇
百度小程序開發
微信小程序開發
微信公眾號開發
uni-app
asp函數庫
ASP
DIV+CSS
HTML
python
更多>>同類信息
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
js指定日期加n天加n月加n年
jquery中動態生成的代碼使用on hover事件時不出現效果
iframe里阻止_blank彈出新窗口的方法
jquery實現下拉加載更多
jquery獲得當前所有input表單數據并進行序列化的各種問題與解決方案serialize與serializeArray的區別分析
更多>>最新添加文章
在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
python通過代碼修改pip下載源讓下載庫飛起
python里面requests.post返回的res.text還有其它的嗎
aliyun阿里云續費域名優惠口令(注冊、續費都可以使用)
windows7環境下安裝配置jdk
python對微信操作要用到這兩個庫wxpy與itchat
ASP中Utf-8與Gb2312編碼轉換亂碼問題的解決方法頁面編碼聲明
DW設置之后更好用 DreamweaverCS編輯GB2312與UTF-8文件在代碼視圖中點擊鼠標錯位問題的解決辦法
更多>>隨機抽取信息
查詢某個字符在字符串中出現的位置數組
仿mop分頁代碼
提交按鈕在自定時間內灰色不可用
dreawmeaver中鮮為人知的小秘訣,讓你制作網頁更加隨心所欲.
本站出現驗證碼問題
振輝除氧器
91超碰caoporen国产香蕉|亚洲天堂在线免费|国产成人片在线观看|日本午夜免a费看大片中文|香蕉国产在线观看免费