js获取表单所有值

通常获取表单所有input框 都是通过 document dom 对象获取节点值

	<form>
				<input id="a1" type="input" value="" name="a1"><br>
				<input id="a2" type="input" value="" name="a2"><br>
				<input id="a3" type="input" value="" name="a3"><br>
				<input id="a4" type="input" value="" name="a4"><br>
				<input id="submit" type="button" value="提交" name="submit">
			</form>

 

下面通过两种方法获取对比一下：

 

 

<script>
				$(function() {
					$('#submit').click(function() {
						
						//方法1：
						var a1 = document.getElementsById("a1").value;
						//var a1 = document.getElementsByName("a1").value;
						
						//要是提交json的格式的话还需要
						var json ={"a1":a1}
						
						//这样子转化一下，一个两个10个input还是可以接受的，但是实际开发中往往几十个 这样子就显得很笨重了，所以推荐方法二
						
						
						
						
						//方法二：
						var d = {};
						var t = $('form').serializeArray(); // 默认是json 格式
						
						//传统的for循环,将值打印出来
						/*
						console.info(t)
						
						for (var i = 0;i<t.length;i++) {
							console.info(t[i]);
							d[t[i].name] =  t[i].value;
							
						}
						
						*/
						
						//jQuery的循环
					 	$.each(t, function() {
							//console.info(t)
							d[this.name] = this.value;
							console.info(d)
						}); 
						
						console.info(JSON.stringify(t));   //从json对象解析出json字符串
						var json_str = JSON.stringify(t);
						
						console.info(JSON.stringify(d)); //从一个对象解析出字符串
					});
				});
				
				
				
			</script>

方法一：

采用原生态的js获取值

方法二：

采用jquery 函数库 获取