[笔记,jQuery]还原已被序列化的表单

有时会需要将表单序列化存起来或做其他用途,也有时会需要把之前存起来的还原到表单上,不过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;}

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章