自实现jquery插件实现对form输入域值填充(原创)

一般网站采用ajax从后台取数据，后台返回json数据，在form表单需要做更新操作时，需要将从服务器取到的数据回显到form表单的输入域中，普遍的做法是每个输入域中设置id，然后一个个赋值，这种做法是重复工作较多且容易出错，基于此，自己封装了一段js代码采用jquery插件的方式用于回显form表单的值，输入域只需要设置name属性即可。废话不多说，上源码。

想免费获取流量，请关注公众号：流量向前冲 (liulxqc)

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script>
        $.extend({
            str2Value: function(p, str) {
                var strs = str.split('.');
                var _tt = p;
                for (var i = 0; i < strs.length; i++) {
                    var tmp = strs[i];
                    if (tmp.indexOf('[') != -1) {
                        var pre = tmp.substring(0, tmp.indexOf('[')),
                            num = tmp.substring(tmp.indexOf('[') + 1, tmp.indexOf(']'));
                        if (typeof(_tt) != 'undefined'&& typeof(_tt[pre]) != 'undefined'&& typeof(_tt[pre][num]) != 'undefined') {
                            _tt = _tt[pre][num];
                            continue;
                        } else {
                            return null;
                        }
                    }
                    if (typeof(_tt) != 'undefined'&& typeof(_tt[strs[i]]) != 'undefined'&& typeof(_tt[strs[i]]) != 'undefined') {
                        _tt = _tt[strs[i]];
                        continue;
                    } else {
                        return null;
                    }
                }
                return _tt;
            }
        });
        (function() {
            jQuery.extend(jQuery.fn, {
                json2Form: function(json) {
                    var tmp = json,
                        _form = $(this).attr('id');
                    if (!_form) {
                        _form = (new Date()).getTime(); //随机生成一个ID
                        $(this).attr('id', _form);
                    }
                    jQuery("#"+ _form + " :input").each(function(i) {
                        var _name = $(this).attr('name');
                        if (_name) {
                            var vv = $.str2Value(tmp, _name);
                            if (vv !== null) {
                                var _type = $(this).attr("type");
                                if (_type == 'text'|| _type == 'hidden') {
                                    $(this).val(vv);
                                } else if (_type == 'radio') {
                                    $("#"+ _form + " :input[type=radio][name='"+ _name + "'][value='"+ vv + "']").attr("checked", "checked");
                                } else if (_type == 'checkbox') {
                                    var arr = vv.split(',');
                                    for (var i = 0; i < arr.length; i++) {
                                        $("#"+ _form + " :input[type=checkbox][name='"+ _name + "'][value='"+ arr[i] + "']").attr("checked", "checked");
                                    }
                                }
                            }
                        }
                    });
                    jQuery("#"+ _form + " textarea").each(function(i) {
                        var _name = $(this).attr('name');
                        if (_name) {
                            var vv = $.str2Value(tmp, _name);
                            if (vv !== null) {
                                $(this).val(vv);
                            }
                        }
                    });
                    jQuery("#"+ _form + " select").each(function(i) {
                        var _name = $(this).attr('name');
                        if (_name) {
                            var vv = $.str2Value(tmp, _name);
                            if (vv !== null) {
                                if ($(this).attr('multiple')) {
                                    var _ss = vv.split(',');
                                    for (var n = 0; n < _ss.length; n++) {
                                        $(this).children('option[value="'+ _ss[n] + '"]').attr("selected", "selected");
                                    }
                                } else {
                                    $(this).val(vv);
                                    $(this).attr('_defaultValue', vv);
                                }
                                $(this).trigger('change'); //解决firefox下通过js改变值后不触发onchange事件,这里手动触发
                            }
                        }
                    });
                }
            });
        })(jQuery);
    </script>
</head>
<body>
<form id="addForm"> 
    <table> 
        <tr> 
            <td><label for="txtname">姓名：</label></td> 
            <td><input type="text" name="name" /></td> 
        </tr> 
        <tr> 
            <td><label for="txtpswd">性别：</label></td> 
            <td> 
                <select name="sex"> 
                    <option value="">
                        请选择
                    </option> 
                    <option value="1">
                        男
                    </option> 
                    <option value="2">
                        女
                    </option> 
                </select> 
            </td> 
        </tr> 
        <tr> 
            <td colspan=2> 
                <input type="submit" /> 
            </td> 
        </tr> 
    </table>
</form>
</body>
<script> 
    var datas = {
        name : "流量向前冲",
        sex : 1
    }
    $("#addForm").json2Form(datas);
</script>
</html>

想免费获取流量，请关注公众号：流量向前冲 (liulxqc)