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

最新推荐文章于 2022-08-15 19:52:49 发布

原创最新推荐文章于 2022-08-15 19:52:49 发布 · 266 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #form #json #ViewUI

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文展示了如何使用jQuery创建一个表单，并通过自定义函数将表单数据转换为JSON字符串的过程。包括HTML表单元素如输入框、下拉列表、复选框和单选框的使用，以及如何收集这些元素的数据并封装成JSON格式。

看了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="提交" onclick="javascript:alert($('#myform').formtojson());"/>&nbsp;<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>

产生的效果如下图所示:

formtojson