JavaScript习题--Jquery获取表单的JSON字符串

JavaScript习题–Jquery获取表单的JSON字符串

题目

题目来自廖雪峰老师的官方网站。
对于下面的表单：

<form id="test-form" action="#0" onsubmit="return false;">
    <p><label>Name: <input name="name"></label></p>
    <p><label>Email: <input name="email"></label></p>
    <p><label>Password: <input name="password" type="password"></label></p>
    <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    <p><label>City: <select name="city">
    	<option value="BJ" selected>Beijing</option>
    	<option value="SH">Shanghai</option>
    	<option value="CD">Chengdu</option>
    	<option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
</form>

输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，例如：{“name”:“Michael”,“email”:…}

解答

下面是js部分的代码：

'use strict';
var json = null;
var obj={};
var form = $("#test-form :input");
var ff=form.filter(function(){
if (this.type==='radio' && !this.checked || this.type==='submit')
    return false;
else
    return true;})
ff.map(function(){
return obj[this.name]=this.value;
})
json=JSON.stringify(obj,null,'  ');
// 显示结果:
if (typeof(json) === 'string') {
    console.log(json);
}
else {
    console.log('json变量不是string!');
}

输出结果：

代码分析

一下为本人的一点见解，可能存在错误的地方，欢迎指正错误，以便日后查看和更改。
首先先创建一个空集合，这个集合用于之后存放map键值对，也可以把键值对看作是一个对象。

var obj={};

之后使用JQuery来查找Dom树中的标签为input的元素，好像是，限定状态:input 可获取input，textarea，select和button等标签元素。

var form = $("#test-form :input");

之后再得到的form中进行筛选，筛选掉那些没有被选择的元素，主要是针对单选框，还有button属性的“提交”按钮。对于多选框（select）来说，多选框可以直接得到在框里的值，不需要进行筛选。

var ff=form.filter(function(){
if (this.type==='radio' && !this.checked || this.type==='submit')
    return false;
else
    return true;})

上面的filter函数，filter函数的返回值为布尔型，如果返回true就保留该元素，如果返回false就删除该元素。if语句中的意思为：this（这里的this指的是Dom树，好像就是form）的type属性如果是radio（radio就是单选框），而且这个属性没有被选择，那么就返回false，或者如果这个type为submit（就是提交按钮），也返回false。因为我们查找Dom树的时候，把提交按钮也给找出来了，但是我们最后的输出里是没有这个按钮的，所以这里要把它筛选出去。这里我们得到的ff，就是筛选之后的对象。由于filter返回一个数组，所以这里的ff应该是：
[‘小李’,‘123123123@qq.com’,‘asdasdasd’,‘Female’,‘shanghai’]。

对于得到的ff，只是得到了value值，我们需要把他带回Dom树中，与他相应的key值进行配对.

ff.map(function(){
return obj[this.name]=this.value;
})

这里对ff=[‘小李’,‘123123123@qq.com’,‘asdasdasd’,‘Female’,‘shanghai’]，进行了map操作，对ff数组里的每一个元素进行了在Dom树里的配对，形成的键值对，最后保存在obj这个集合里面,就是我们想要得到的对象。

再通过这个obj对象，将其序列化成为最后的想要的JSON格式的字符串，就是我们最终的答案。

json=JSON.stringify(obj,null,'  ');

后记

由于本人水平有限，也在初学阶段，因此想记录下来学习过程中的一些理解的不好的地方，写博客纯粹是为了记录心得，提升自己，文中难免有理解错误或者不全面的地方，并不是为了误人子弟，也欢迎广大网友提出指正错误，本人不胜感激！！！