<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>form里面内容转json,json填充form表单</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript"> /** * 将form里面的内容序列化成json * 相同的checkbox用分号拼接起来 * @param {obj} 需要拼接在后面的json对象 * @method serializeJson * */ $.fn.serializeJson = function (otherString) { var serializeObj = {}, array = this.serializeArray(); $(array).each(function () { if (serializeObj[this.name]) { serializeObj[this.name] += ';' + this.value; } else { serializeObj[this.name] = this.value; } }); if (otherString != undefined) { var otherArray = otherString.split(';'); $(otherArray).each(function () { var otherSplitArray = this.split(':'); serializeObj[otherSplitArray[0]] = otherSplitArray[1]; }); } return serializeObj; }; /** * 将josn对象赋值给form * @param {obj} 需要给form赋值的json对象 * @method serializeJson * */ $.fn.setForm = function (jsonValue) { var obj = this; $.each(jsonValue, function (name, ival) { var $oinput = obj.find("input[name=" + name + "]"); if ($oinput.attr("type") == "checkbox") { if (ival !== null) { var checkboxObj = $("[name=" + name + "]"); var checkArray = ival.split(";"); for (var i = 0; i < checkboxObj.length; i++) { for (var j = 0; j < checkArray.length; j++) { if (checkboxObj[i].value == checkArray[j]) { checkboxObj[i].click(); } } } } } else if ($oinput.attr("type") == "radio") { $oinput.each(function () { var radioObj = $("[name=" + name + "]"); for (var i = 0; i < radioObj.length; i++) { if (radioObj[i].value == ival) { radioObj[i].click(); } } }); } else if ($oinput.attr("type") == "textarea") { obj.find("[name=" + name + "]").html(ival); } else { obj.find("[name=" + name + "]").val(ival); } }) } $(function () { $("#form").setForm({ a: 'www.luofenming.com', b: '王五', c: '王五', d: '罗分明网络博客', e: 7, f: '8;10', i: '王' }); }); function submitForm() { console.log($("#form").serializeJson()); } </script> </head> <body> <form id="form"> <div><input type="text" name="a" /></div> <div><input type="text" name="b" id="b" /></div> <div><input type="hidden" name="c" id="c" /></div> <div> <textarea name="d" rows="8" cols="40"></textarea> <input type="checkbox" name="f" value="10" /> </div> <div> <select name="e"> <option value="5" selected="selected">5</option> <option value="6">6</option> <option value="7">7</option> </select> </div> <div> <input type="checkbox" name="f" value="8" /> <input type="checkbox" name="f" value="9" /> </div> <div> <input name="i" type="radio" value="王" />王 <input name="i" type="radio" value="小" />小 </div> <div> <input type="button" name="g" value="Submit" id="g" onclick="submitForm()" /> </div> </form> </body> </html>