jQuery实现表单序列化反序列化

article/2025/11/9 2:50:17

js序列化反序列化参考： https://blog.csdn.net/zqtsx/article/details/17299087

涉及知识点：序列化：var serializeJson = JSON.stringify($("#fiveLevelIndexForm").serializeArray());反序列化： var json =  $.parseJSON(parent.$("#serializeResult").val());为父页面赋值：parent.$("#serializeResult").val(serializeJson);从父页面取值：parent.$("#serializeResult").val()通过name属性为文本框、下拉框赋值：$("select[name='"+name+"']").val(value);$("textarea[name='"+name+"']").val(value);

案例：将弹框填写的内容序列化到父页面，再次点击时候反序列化出来。
如图:
在这里插入图片描述
代码：
JS 数据：

JS 代码：<script>$(function(){var json =  $.parseJSON(parent.$("#serializeResult").val());if(json !=null && json !=undefined){for(var i=0,l=json.length;i<l;i++){var name = "";var value = "";for(var key in json[i]){if(key=='name'){name = json[i][key];}if(key=='value'){value = json[i][key];}// console.log(key+':'+json[i][key]);}if(value=='0' || value=="1"){$("select[name='"+name+"']").val(value);}else{$("textarea[name='"+name+"']").val(value);}}}$("#Submit1").click(function(){var serializeJson = JSON.stringify($("#fiveLevelIndexForm").serializeArray());console.log(serializeJson);parent.$("#serializeResult").val(serializeJson);showid('smallLay');//返回成功，关闭窗口parent.$windowClose();});});</script>

前台弹框页面截图：
在这里插入图片描述

父页面定义隐藏文本框：