将webForm的数据转化成json字符串及json对象进行处理的JS资源-CSDN文库

共2个文件

js：1个

htm：1个

4星 · 超过85%的资源需积分: 21 29 浏览量 2011-08-17 12:07:56 上传评论收藏 4KB RAR 举报

在Web开发中，经常需要将用户在HTML表单（Form）中输入的数据转换为JSON格式，以便于数据传输和处理。这个过程涉及到JavaScript语言的一些核心概念，如DOM操作、对象和数组操作以及JSON对象的使用。以下是对这个主题的详细说明。 `Web Form`是HTML中用于收集用户信息的一种元素，它由多个表单控件如文本框、复选框、单选按钮等组成。在提交表单时，这些控件的值会按照键值对的形式发送到服务器。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON格式与JavaScript的对象字面量非常相似，由大括号`{}`包裹，键值对以冒号分隔，键值对之间用逗号分隔。将Web Form的数据转换为JSON字符串的过程通常包括以下几个步骤： 1. **获取表单数据**：使用JavaScript的`document.getElementById`或`document.querySelector`等方法获取表单元素，然后通过`form.elements`属性获取所有表单控件。 2. **遍历表单控件**：对每个表单控件进行遍历，获取其名称（name属性）和值。需要注意的是，多选框和复选框可能需要特殊处理，因为它们可能有多个选中项。 3. **构建JSON对象**：创建一个空对象，然后根据表单控件的名称作为键，控件的值作为值，将它们添加到对象中。 4. **转换为JSON字符串**：使用JavaScript内置的`JSON.stringify`方法将构建好的对象转换为JSON字符串。 5. **处理JSON对象**：如果需要在客户端进一步处理JSON数据，可以将其解析为JavaScript对象，使用`JSON.parse`方法。这样就可以像操作普通JavaScript对象一样操作这些数据。在给定的文件中，`Form2Json.htm`可能是包含HTML表单的网页，而`Form2Json.js`则可能是一个JavaScript脚本，实现了上述的转换逻辑。在实际应用中，这样的脚本通常会在表单提交之前运行，将表单数据转换为JSON格式，然后通过Ajax请求或者其他方式发送到服务器，或者在客户端进行进一步处理。理解这个过程对于任何Web开发者来说都是非常重要的，因为它允许灵活的数据处理和交换，是现代Web应用程序中的常见实践。同时，掌握JavaScript的DOM操作、对象和JSON相关知识也是成为合格前端开发者的必备技能。

资源推荐

资源详情

资源评论

收起资源包目录

Form2Json.rar （2个子文件）

Form2Json.js 8KB

Form2Json.htm 3KB

<HTML> <HEAD> <title>form to json test</title> <STYLE> .userData {behavior:url(#default#userdata);} </STYLE> <script src="Form2Json.js"></script> </HEAD> <BODY> <FORM ID="oPersistForm">  <INPUT name=uuid CLASS="userData" TYPE="hidden" ID="uuid" value="abcd-1234-3321"> <br> ID：<INPUT name=id CLASS="userData" TYPE="text" ID="id" value="6523421" disabled> <br> 所在班级：<INPUT name=cls CLASS="userData" TYPE="text" ID="cls" value="六(1)" readonly> <br> 姓名：<INPUT name=xm CLASS="userData" TYPE="text" ID="oPersistInput1" value="张三"> <br> 密码：<INPUT name=mm CLASS="userData" TYPE="password" ID="mm" value="123456"> <br> 性别：<INPUT name=xb CLASS="userData" TYPE="text" ID="oPersistInput2" value="男"> <br> 简历 <br> <textarea name=jl CLASS="userData" cols=80 rows=12 ID=oPersistInput3>这是我的简历，1949.10.1出生.</textarea> <br> 文化程度： <input type=radio name=whcd value="a">小学以下  <input type=radio name=whcd value="b">中学  <input type=radio name=whcd value="c">大专  <input type=radio name=whcd value="d" checked>大学  <br> 个人爱好： <input type=checkbox name=grah value="a1" checked>游泳  <input type=checkbox name=grah value="a2">篮球  <input type=checkbox name=grah value="a3" checked>跑步  <input type=checkbox name=grah value="a4">爬山  <br> 最喜欢的汽车品牌： <SELECT ID="oSelect1" NAME="Cars"> <OPTION VALUE="c1" SELECTED>宝马 <OPTION VALUE="c2">保时捷 <OPTION VALUE="c3">奔驰 <OPTION VALUE="c4">兰博基尼 <OPTION VALUE="c5">奥迪 <OPTION VALUE="c6">本田 </SELECT> <br> 最喜欢的人物(可多选)： <SELECT ID="oSelect2" NAME="VIP" SIZE="3" MULTIPLE> <OPTION VALUE="h1" SELECTED>毛泽东 <OPTION VALUE="h2">周恩来 <OPTION VALUE="h3">朱德 <OPTION VALUE="h4">蔡元培 <OPTION VALUE="h5">李隆基 <OPTION VALUE="h6">朱元璋 <OPTION VALUE="h7">秦始皇 </SELECT> <br> <br> <INPUT TYPE="button" VALUE="Load"> <INPUT TYPE="button" VALUE="Save"> <INPUT TYPE="button" VALUE="formtojson" onclick="alert(form2Json.formToJSON(oPersistForm)); id1.value=form2Json.formToJSON(oPersistForm)"> </FORM> <textarea CLASS="userData" cols=80 rows=6 ID=id1></textarea> <br> <input type=button value="解析" onclick="jiexi()"> <script> function jiexi() { var j = form2Json.string2json1(id1.value); // 将json字符串转化成json对象 alert("密码="+j.mm+"\n第1个最喜欢的人物="+j['VIP'][0]); alert("个人爱好="+j.grah.join(",")); //用join方法将其值组合成字符串 alert("简历="+unescape(j.jl) ); //用unescape方法将反处理被escape处理过的数据 } </script> </BODY> </HTML>

评论收藏

内容反馈