1. 有的时候想偷点懒, 页面上有大量的表单提交数据, 每次单独获取都比较麻烦. 代码冗余度也比较多, 因此封装了一个方法.
2. 表单元素必须要有 name 属性, name 属性是向后端提交的字段数据.
3.html 代码
- <h3 > 下拉框 </h3>
- <select name="sel" id="sel" class="query">
- <option value ="sel-1">sel-1</option>
- <option value ="sel-2">sel-2</option>
- </select>
- <h3 > 输入框 </h3>
- <input type="text" name="text1" class="query" value="hello" />
- <input type="text" name="text2" class="query" value="word" />
- <h3 > 密码框 </h3>
- <input type="password" name="password" class="query" value="123456" />
- <h3 > 单选框 </h3>
- 单选 1<input type="radio" name="radio" class="query" value="r1" checked />
- 单选 2<input type="radio" name="radio" class="query" value="r2" checked/>
- 单选 3<input type="radio" name="radio" class="query" value="r3" />
- <h3 > 复选框 </h3>
- 复选框 1<input type="checkbox" name="check" id=""class="query"value="c1" checked/>
- 复选框 2<input type="checkbox" name="check" id=""class="query"value="c2" />
- 复选框 3<input type="checkbox" name="check" id=""class="query"value="c3" checked/>
- <h3>search</h3>
- <input type="range" name="range" id=""class="query"value="" />
- <input type="color" name="color" id=""class="query"value="" />
- <h3>
- <button type="button" id="save">
提交
- </button>
- </h3>
4. 此处引入了 JQ 库.
4.1js 代码块
使用说明: 调用方法的时候传入 class 名称即可.
- // 封装方法, 获取到 form 表单的数据. 使用此方法, 表单元素必须存在那么属性.
- //el: 元素的 class 名称.
- function getParameter(el){
- var obj={};
- $(el).each(function(index,item){
- // 判断元素的类型
- if(item.type=="text" || item.type=="password" || item.type=="select-one" || item.type=="tel" ||
- item.type=="search" || item.type=="range" || item.type=="number" || item.type=="month" ||
- item.type=="email" || item.type=="datetime-local" || item.type=="datetime" || item.type=="date" ||
- item.type=="color"){
- // 获取到 name 的值, name 的值就是向后台传递的数据
- obj[$(this).attr("name")]=$(this).val();
- }else if(item.type=="checkbox"){
- var stamp=false;
- if($(this).attr("name") && !stamp){
- stamp=false;
- // 获取到复选框选中的元素
- var checkboxEl=$("input[name="+$(item).attr('name')+"]:checked");
- if(checkboxEl){
- var checkboxArr=[];
- // 取出复选框选中的值
- checkboxEl.each(function(idx,itm){
- checkboxArr.push($(itm).val());
- });
- obj[$(this).attr("name")]=checkboxArr.join(",");
- }
- }
- }else if(item.type=="radio"){
- // 获取到单选框选中的值
- var radio_val=$("input[name="+$(item).attr('name')+"]:checked").val();
- if(radio_val){
- obj[$(item).attr("name")]=radio_val;
- }
- }
- });
- return obj;
- }
- // 调用方法
- $("#save").click(function(){
- var parameter=getParameter(".query");
- console.log(parameter);
- });
原文链接地址: https://mp.weixin.qq.com/s/61VyfaYgPK-IjDq2m2-HKg
来源: https://www.cnblogs.com/ts119/p/12061107.html