日期:2014-05-16  浏览次数:20415 次

原创:利用jquery将表单数据转换成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\没有,则将其值存