github源码地址：
https://github.com/MrITzhongzi/tool-functions/tree/master/表单form2json
使用文档：
fotm2date: 使用文档 1、引入js文件 <script src="./form2json.js"></script> 2、调用暴露的全局方法 var formObj = formInterface() //返回一个form相关对象，各种方法就封装在这个对象里 3、调用form2JSon方法，传入一个父盒子的id，返回一个 由input的name和value组成的 对象 var dataObj = formObj.form2JSon('form') 注释：formInterface() 对象返回的对象中的方法解析： 1、form2JSon 传入一个父盒子的id，返回一个 由input的name和value组成的 对象
框架js源码：（很简单的）
/** * lihongwei * 2017/8/30 */ ( function () { var reObj = {} function form2JSon ( id) { return new FormToJson(id) } function FormToJson ( id) { this. init(id) return returnData() } var prototype = { init: function ( id) { var box = document. querySelector( '#form') traversal(box) } } function traversal ( boxDom) { var doms = boxDom.children Array.prototype.forEach. call(doms, function ( element) { if (element.tagName === 'INPUT') { if (element.type === 'radio') { dealRadio(element) } else if (element.type === 'checkbox') { dealCheckbox(element) } else { var name = element. getAttribute( 'name') var value = element.value reObj[name] = value } } else if (element.tagName === 'SELECT') { var selectName = element. getAttribute( 'name') var selectVal = element.value reObj[selectName] = selectVal } else { if (element.children.length !== 0) { traversal(element) } } }) } function dealRadio ( element) { var radioName = element. getAttribute( 'name') var radioEles = document. querySelectorAll( 'input[name="' + radioName + '"]') for ( var j = 0; j < radioEles.length; j ++) { if (radioEles[j].checked) { reObj[radioName] = radioEles[j].value } } } function dealCheckbox ( element) { var checkArr = [] var checkName = element.name var checkEles = document. querySelectorAll( 'input[name="' + checkName + '"]') for ( var i = 0; i < checkEles.length; i ++) { if (checkEles[i].checked) { checkArr. push(checkEles[i].value) } } reObj[checkName] = checkArr } function returnData () { return reObj } /** * 暴露的借口 * form2JSon： 传入盒子的id 返回 由input的name和value组成的 对象 * */ function formInterface () { return { form2JSon: form2JSon } } FormToJson.prototype = prototype window.formInterface = formInterface })()
实例demo：
<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < meta name= "viewport" content= "width=device-width, initial-scale=1.0"> < meta http-equiv= "X-UA-Compatible" content= "ie=edge"> < title>form2json</ title> </ head> < body> < div id= "form"> < div> < input type= "text" name= "haha000"> < div> < div> < div> < input type= "text" name= "haha"> </ div> < select name= "select" id= ""> < option value= "0000">99</ option> </ select> </ div> < input type= "text" name= "haha111"> < input type= "text" name= "haha222"> < input type= "text" name= "haha333"> </ div> </ div> < select name= "wwww" id= ""> < option value= "0">请选择</ option> < option value= "1">22</ option> < option value= "2">22</ option> < option value= "3">22</ option> < option value= "4">22</ option> </ select> < input type= "radio" value= "1" name= "sex"> < input type= "radio" value= "2" name= "sex" checked> < input type= "checkbox" value= "1" name= "sex1"> < input type= "checkbox" value= "2" name= "sex1" checked> < input type= "checkbox" value= "4" name= "sex1"> < input type= "checkbox" value= "6" name= "sex1" checked> </ div> < input type= "checkbox" value= "1" name= "sex"> < input type= "checkbox" value= "2" name= "sex" checked> < button>生成</ button> </ body> < script src= "./form2json.js"></ script> < script> var btn = document. querySelector( 'button') btn. onclick = function(){ var formObj = formInterface() var dataObj = formObj. form2JSon( 'form') console. log( JSON. stringify(dataObj)) } </ script> </ html>
