有时会需要将表单序列化存起来或做其他用途,也有时会需要把之前存起来的还原到表单上,不过js/jquery没有内建的把表单反序列化回去,自行DIY也有些麻烦,网路上有很多大大因应当时专案可用的版本,找了一个比较全面的来使用~~
在下找到这篇Is there an inverse function to jQuery serialize? 来进行修改,这篇已经考虑到input群组/多选了,不过漏掉select的多选,改写后怕忘记来上面记录,也分享给有需要的人~~
有任何建议或可以更好的地方欢迎提出一起讨论喔~~
表单序列化
$('#myForm').serialize();
还原表单
//使用方式var serializeString = $('#myForm').serialize(); // 序列化$('#myForm').deserialize(serializeString); // 还原表单/** * 还原序列化到表单 * @author 舜 * @param {string} serializeString 序列化字串 * 2019/11/05 : 修正当 name = xxx[] 会出错的问题 */$.fn.deserialize = function(serializedString) { var $form = $(this); if($form.length==0) return; $form[0].reset(); //serializedString = serializedString.replace(/+/g, '%20'); var formFieldArray = serializedString.split("&"); //Loop over all name-value pairs $.each(formFieldArray, function(i, pair) { var nameValue = pair.split("="); var name = decodeURIComponent(nameValue[0]); var value = decodeURIComponent(nameValue[1]); //Find one or more fields var $field = $form.find('[name="' + name + '"]'); if($field.is("input")){ //Checkboxes and Radio types need to be handled differently if ($field[0].type == "radio" || $field[0].type == "checkbox") { var $fieldWithValue = $field.filter('[value="' + value + '"]'); var isFound = ($fieldWithValue.length > 0); //Special case if the value is not defined; value will be"on" if (!isFound && value == "on") { $field.first().prop("checked", true); } else { $fieldWithValue.prop("checked", isFound); } } else { //input $field.val(value); } }else if($field.is("select")){ // 多选的下拉选单 $field.val($field.val().concat([value])); } else { // textarea $field.val(value); } }); return this;}