原创:利用jquery将表单数据转换成json字符串以便提交

martixwang

看了jquery的表单对象，产生了自己写一个表单数据生成json字符串的函数的想法，试了一下，代码如下，抛砖引玉吧！
html代码：
<div style="width:400px;background-color:#CCCCCC;padding:10px"><form id="myform"><p>姓名:<input type="text" value="wangsir" id="uname" name="uname"/></p><p>怩称:<input type="text" value="风一样的男子" id="nikename" name="nikename"/></p><p>性别:<select name="sex" id="sex"><option selected value=1>男</option><option value=0>女</option></select></p><p>婚姻状态：<input type="radio" name="married"  value="yes"/>已婚<input type="radio" name="married" value="no">未婚</p><p>个人爱好:<input type="checkbox" name="fav" value="足球">足球<input type="checkbox" name="fav" value="台球" >台球<input type="checkbox" name="fav" value="羽毛球">羽毛球</p><p>择偶标准:<input type="checkbox" name="standard" value="高">高<input type="checkbox" name="standard" value="帅">帅<input type="checkbox" name="standard" value="富">富</p><p>目标城市:<select name="city" id="city"><option selected value="wh">武汉</option><option value="other">外省</option></select></p><p>头像:<input type="text" readonly value="./images/head.jpg" id="headpic" name="headpic"><img src="./images/head.jpg" width=64px height=64px id="headpic" /></p><p>受教育经历:<textarea rows="10" cols="50" id="eduhistory" name="eduhistory" value="" width="200px" height="180px"></textarea></p><p><input type="button" value="提交" /> <input type=reset value="取消" /></p></form></div> 
javascript代码:
 
$.fn.formtojson = function(){       var formid="#"+$(this).attr("id");           var json="";     var radios="";     var checks="";     var texts="";     var combos="";     var textareas="";     var selector=formid+" input"; //找到表单中所有的input标签     var comboselector=formid+" select";  //找到表单中所有select combo对象     var textareaselector=formid+" textarea";  //找到表单的大文本输入框     //处理大文本框     for(i=0;i<$(textareaselector).length;i++){        var textareaelement=textareaselector+":eq("+i+")";     var textareaname=$(textareaelement).attr("name");     if(textareas.indexOf(textareaname)==-1){        textareas=(textareas.length==0?"":textareas+",")+textareaname+":'"+     $("textarea[name='"+textareaname+"']").val()+"'";     }     }     //处理下拉列表框     for(i=0;i<$(comboselector).length;i++){        var comboelement=comboselector+":eq("+i+")";     var comboname=$(comboelement).attr("name");     if(combos.indexOf(comboname)==-1){        combos=(combos.length==0?"":combos+",")+comboname+":'"+     $("select[name='"+comboname+"']").val()+"'";     }     }     //处理input对象     for(i=0;i<$(selector).length;i++)     {        var element=selector+":eq("+i+")";    var etype=$(element).attr("type");    //处理文本框    if(etype=="text"||etype=="password"){     var tkname=$(element).attr("name");    if(texts.indexOf(tkname)==-1){       texts=(texts.length==0?"":texts+",")+tkname+":'"+$("input[name='"+tkname+"']").val()+"'";    }    }    //处理单选框    if(etype=="radio"){     var rkname=$(element).attr("name");    if(radios.indexOf(rkname)==-1){       var checkedcount=$("input[name='"+rkname+"']:checked").length;       radios=(radios.length==0?"":radios+",")+rkname+":'"+        (checkedcount==0?"":$("input[name='"+rkname+"']:checked").val())+"'";    }    }    //处理多选框    if(etype=="checkbox"){         var ckname=$(element).attr("name");     //alert(ckname);                     //1\检查checks是否已经此checkbox     if(checks.indexOf(ckname+":")==-1){ //以前没有找到过        //2\没有，则将其值存入checks        var tempchecks="";        if($("input[name='"+ckname+"']:checked").length>0){         for(j=0;j<$("input[name='"+ckname+"']:checked").length;j++){         tempchecks=(tempchecks.length==0?"":tempchecks+"|")+$("input[name='"+ckname+"']:checked:eq("+j+")").val();         }         //alert(tempchecks);        }        checks=(checks.length==0?"":checks+",")+ckname+":'"+tempchecks+"'";        //alert(checks);     }    }     }     json=(json.length==0?"":json+",") +(texts.length==0?"":texts+",")+          (combos.length==0?"":combos+",")+(radios.length==0?"":radios+",")+    (textareas.length==0?"":textareas+",")+(checks.length==0?"":checks+",");     return json;   }<script> 
产生的效果如下图所示: