jquery - 如何将表单重置为上次保存(通过ajax)阶段

Question

问题是我正在使用 jQuery("form")[0].reset(); 在需要时重置表单。此方法正在将形式重置到初始阶段。这里初始阶段的意思是“表单第一次加载到页面时带有一些值的阶段”。

但我需要的是将表单重置为上次保存的阶段。

我正在做什么:通过 jQuery.ajax({----}); 保存表单数据，无需任何页面刷新。

什么是目标:使用 ajax 请求保存表单数据后，如果用户更改表单中的任何其他值但不想保存并选择重置形成最后保存的值。如何实现这一目标？因为 reset(); 会将表单重置为初始值。

任何帮助将不胜感激。

谢谢

Answer 1

谢谢大家的回复。

我尝试根据 ma​​dalin ivascu 的评论实现解决方案。还找到了jsfiddle做同样的事情。经过一些修改/更改，我得到了我需要的东西。

第 1 步:编写自定义插件:

(function($) {
    $.fn.deserialize = function (serializedString) {
        var form = jQuery(this);
        form[0].reset();
        serializedString = serializedString.replace(/\+/g, "%20");
        var formFieldArray = serializedString.split("&");
        jQuery.each(formFieldArray, function(i, pair) {
            var nameValue = pair.split("=");
            var name = decodeURIComponent(nameValue[0]);
            var value = decodeURIComponent(nameValue[1]);

            var field = form.find("[name='" + name + "']");
            if (field[0] != undefined) {
                if (field[0].type == "radio" || field[0].type == "checkbox") {
                    var fieldWithValue = field.filter('[value="' + value + '"]');
                    var isFound = (fieldWithValue.length > 0);
                    if (!isFound && value == "on") {
                        field.first().prop("checked", true);
                    } else {
                        fieldWithValue.prop("checked", isFound);
                    } 
                } else {
                    field.val(value);
                }
            }
        });
    }
}(jQuery));

第 2 步:将序列化的表单数据保存在某处。

当您需要将表单重置为上次保存的阶段时，请使用:

yourForm.deserialize(serializedFormData);