订阅本栏目 RSS您所在的位置: 深山工作室 > HTML > 正文

jquery获得当前所有input表单数据并进行序列化的各种问题与解决方案serialize与serializeArray的区别分析

2022/2/24 15:39:57 字体: 浏览 631

在使用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>

相关阅读
汽车租赁系统
旅行社网站模板默认风格1
鼠标放在表格区域内,当前格的一整行和一整列变色
简单的圆角实现方案
旅行社手机网站模板10
谈IE与Firefox的CSS兼容大全
长春天马国际旅行社
汽液两相流
共有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的区别分析
更多>>最新添加文章
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
aliyun阿里云续费域名优惠口令(注册、续费都可以使用)
windows7环境下安装配置jdk
python对微信操作要用到这两个库wxpy与itchat
ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明
DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法
解决国内 github.com 打不开的准确方法
更多>>随机抽取信息
图片链接默认链接为灰色,鼠标放上去变彩色css效果代码
Python PyInstaller安装和使用教程(详解版)
深山旅行社网站管理系统 v1.5
14个CSS实用技巧精选推荐
利用javascript高亮关键词并且加上链接系列 2
如何利用ASP清除所有的Application对象