巧用jQuery选择器提高写表单效率的方法

2024-10-05 18:46:35

相信很多小伙伴都会遇到需要做表单的需求，就像我现在做的医院项目，茫茫多的表单无穷无尽。一开始做表单使用最笨的方法：一个个span去定义ID，每个数据都用ajax获取后赋值显示，然后在表单提交前一个个用jQuery根据ID获取元素的value，组成一个model来提交给服务器。
后来发现使用jQuery可以大大简化这个过程。于是我修改了工作方法，总结了我的一些提高写表单效率的方法。

需求

表单中存在最多的无非就是文本、文本框、单选框、多选框。而一些表单中会有几十个甚至几百个选项。我们的目标就是以最高的效率来完成这些表单的数据获取和数据提交。
注意：如果元素ID和服务器上获取的json字段的名字是一样的，那么这篇文章或许能对你提高工作效率有所帮助。

文本和文本框

对于文本和文本框，我们通常需要为元素添加ID来绑定和获取数据。

将数据显示到界面中
•用for循环遍历解析成功的JSON数据
•通过if判断过滤数据是span的还是input的。
•将数据传给和数据名同名的ID元素。

 for (var key in json) {
  //过滤type为text的文本框
  if ($('#' + key).attr('type') == 'text') {
    $('#' + key).val(json[key]);
  }
  if($('#' + key).prop('tagName') == 'SPAN'){
    $('#' + key).text(json[key]);
  }
}

快速获取数据对象用于提交服务器
•定义空model对象。
•通过jQuery选择器获取目标元素的value。
•将数据传入model中，对象元素的字段就是HTML元素的ID。

var model = {};
$('input[type="text"]').each(function () {
  model[$(this).attr('id')]=$(this).val();
});
$('span').each(function () {
  model[$(this).attr('id')]=$(this).text();
});
console.log(model);

按照如下方法，我们只需要照着后端提供的数据字段给HTML定义id，而JS就不需要写太多代码就可以完成表单了。再也不怕表单字段太多了。

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery-2.2.3.js"></script>
</head>
<body>
  <div>
    <div>
      <label>姓名：<input type="text" id="name"></label>
      <label>性别：<input type="text" id="sex"></label>
      <label>年龄：<input type="text" id="age"></label>
      <label>时间：<input type="text" id="time"></label>
    </div>
    <div>
      <label>a：<span id="param01">1</span></label>
      <label>b：<span id="param02">2</span></label>
      <label>c：<span id="param03">3</span></label>
      <label>d：<span id="param04">4</span></label>
    </div>
  </div>
  <button onclick="showResult()">显示结果</button>
  <script>
    //多条input或者span的快速赋值
    //data是模拟服务器返回的JSON数据
    var data = '{"name":"张三","sex":"女","age":22,"time":"2016-5-10","param01":111,"param02":222,"param03":333,"param04":444}';
    //将数据显示到页面中
    var json = eval('(' + data + ')');
    for (var key in json) {
      if ($('#' + key).attr('type') == 'text') {
        $('#' + key).val(json[key]);
      }
      if($('#' + key).prop('tagName') == 'SPAN'){
        $('#' + key).text(json[key]);
      }
    }

    //获取文本和文本框的内容转为JSON对象
    function showResult() {
      var model = {};
      $('input[type="text"]').each(function () {
        model[$(this).attr('id')]=$(this).val();
      });
      $('span').each(function () {
        model[$(this).attr('id')]=$(this).text();
      });
      console.log(model);
    }
  </script>
</body>
</html>

Radio和Checkbox

另外一种经常出现于表单中的就是radio、checkbox这些单选多选的元素了。这些元素通常用name命名一组选项。下面我同样用jQuery简化数据的显示和提交。

显示数据

和之前的文本一样，用for循环遍历json数据，然后通过if过滤后显示到界面。不同之处是这边是通过name来显示和绑定数据的。
注：对radio和checkbox处理的方法写在了后面，所以复制粘贴的同学们请注意别漏了~

for(var key in json){
  if ($('input[name=' + key + ']').attr('type') == 'radio') {
   showRadioValue(key, json[key]);
  }
  if ($('input[name=' + key + ']').attr('type') == 'checkbox') {
   showCheckBoxValue(key, json[key]);
  }
}

获取数据model的方法
•定义空model对象。
•定义name避免重复添加。
•遍历所有radio获取结果传给model
•遍历所有checkbox获取结果传给model

     function showResult() {
      var model = {};
      var radioName = '';
      var checkboxName = '';
      $("input[type='radio']").each(function () {
        if($(this).attr('name') != radioName){
          radioName = $(this).attr('name');
          model[radioName] = getRadioValue(radioName);
        }
      });
      $("input[type='checkbox']").each(function () {
        if($(this).attr('name') != checkboxName){
          checkboxName = $(this).attr('name');
          model[checkboxName] = getCheckboxValue(checkboxName);
        }
      });
      console.log(model);
    }

处理radio和checkbox的一些方法

这里我对radio和checkbox的显示和获取结果写了几个方法。

    function showRadioValue(name, value) {
      $('input[name=' + name + ']').each(function () {
        if(value == $(this).val()){
          $(this).attr('checked', 'true');
        }
      });
    }

    function getRadioValue(name) {
      var value = 0;
      var i = 0;
      $('input[name=' + name + ']' ).each(function () {
        if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
          value = $('input[name=' + name + ']').eq(i).val();
          return;
        }
        i++;
      });
      return value;
    }

    function showCheckBoxValue (name, value) {
      var values = value.split(',' );
      var row = 1;
      $('input[name="' + name + '"]').each( function () {
        if (values[row] == 1) {
          $(this).attr("checked" , 'true');
        }
        row++;
      });
    }

    function getCheckboxValue (name) {
      var text = "" ;
      $('input[name="' + name + '"]').each( function () {
        var t = '' ;
        if ($(this ).is(':checked')) {
          t = "1";
        } else {
          t = "0";
        }
        text += "," + t;
      });
      return text;
    }

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="jquery-2.2.3.js"></script>
</head>
<body>
 <div>
  <div>
   <label><input type="radio" name="param01" value="1">1</label>
   <label><input type="radio" name="param01" value="2">2</label>
   <label><input type="radio" name="param01" value="3">3</label>
  </div>
  <div>
   <label><input type="radio" name="param02" value="1">1</label>
   <label><input type="radio" name="param02" value="2">2</label>
   <label><input type="radio" name="param02" value="3">3</label>
  </div>
  <div>
   <label><input type="radio" name="param03" value="1">1</label>
   <label><input type="radio" name="param03" value="2">2</label>
   <label><input type="radio" name="param03" value="3">3</label>
  </div>
  <div>
   <label><input type="checkbox" name="param04">1</label>
   <label><input type="checkbox" name="param04">2</label>
   <label><input type="checkbox" name="param04">3</label>
   <label><input type="checkbox" name="param04">3</label>
  </div>
  <div>
   <label><input type="checkbox" name="param05">1</label>
   <label><input type="checkbox" name="param05">2</label>
   <label><input type="checkbox" name="param05">3</label>
   <label><input type="checkbox" name="param05">3</label>
  </div>
  <button onclick="showResult()">显示结果</button>
  <label id="result">result</label>
 </div>
 <script>
  //多条radio或者checkbox的快速赋值
  var data = '{"param01":"1","param02":"3","param03":"2","param04":",1,0,0,0","param05":",0,0,1,1"}';
  var json =eval( '(' + data + ')');
  for(var key in json){
   if ($('input[name=' + key + ']').attr('type') == 'radio') {
    showRadioValue(key, json[key]);
   }
   if ($('input[name=' + key + ']').attr('type') == 'checkbox') {
    showCheckBoxValue(key, json[key]);
   }
  }

  function showRadioValue(name, value) {
   $('input[name=' + name + ']').each(function () {
    if(value == $(this).val()){
     $(this).attr('checked', 'true');
    }
   });
  }

  function getRadioValue(name) {
   var value = 0;
   var i = 0;
   $('input[name=' + name + ']' ).each(function () {
    if ($('input[name=' + name + ']').eq(i).is( ':checked')) {
     value = $('input[name=' + name + ']').eq(i).val();
     return;
    }
    i++;
   });
   return value;
  }

  function showCheckBoxValue (name, value) {
   var values = value.split(',' );
   var row = 1;
   $('input[name="' + name + '"]').each( function () {
    if (values[row] == 1) {
     $(this).attr("checked" , 'true');
    }
    row++;
   });
  }

  function getCheckboxValue (name) {
   var text = "" ;
   $('input[name="' + name + '"]').each( function () {
    var t = '' ;
    if ($(this ).is(':checked')) {
     t = "1";
    } else {
     t = "0";
    }
    text += "," + t;
   });
   return text;
  }

  function showResult() {
   var model = {};
   var radioName = '';
   var checkboxName = '';
   $("input[type='radio']").each(function () {
    if($(this).attr('name') != radioName){
     radioName = $(this).attr('name');
     model[radioName] = getRadioValue(radioName);
    }
   });
   $("input[type='checkbox']").each(function () {
    if($(this).attr('name') != checkboxName){
     checkboxName = $(this).attr('name');
     model[checkboxName] = getCheckboxValue(checkboxName);
    }
   });
   console.log(model);
  }
 </script>
</body>
</html>

Tips
•如果有一些特殊处理的内容（如时间格式文本），可以先遍历后在遍历之后单独进行赋值。
•以上方法可以用于所有以ID定义的用于显示和获取数据的HTML元素。
•用好jQuery的选择器可以获取到任何所需的元素、元素集合。
•在each()方法中$(this)表示当前元素。
•获取所选ID的元素标签：$('#' + key).prop('tagName') == 'SPAN'，注意：标签结果'SPAN'都是大写的,可以打log验证。
•不断找规律、总结提炼，找出最好的偷懒方法，尽量避免体力劳动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jQuery使用ajaxSubmit()提交表单示例

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>
jquery validate.js表单验证的基本用法入门

这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码
jQuery Selectors(选择器)的使用(九、表单对象属性篇)

本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 本篇讲解::enabled,:disabled,:checked,:selected的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 运行后,需要刷新下,加载下jquery jQuery-Selectors-9 .div { width:95%; margin-left:15px
jQuery基本选择器(实例及表单域value的获取方法)

jQuery基本选择器包括 CSS选择器.层级选择器和.表单域选择器. 1.CSS选择器 (1)标签选择器 $("div") $("p") $("table") 等一系列 HTML 标签 (2)ID选择器 <input id="user" type="text"> 获取该标记的值:$("#user").val(); (3)类选择器 <input type="
jquery ajax提交表单数据的两种方式

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!
jquery获取input表单值的代码

jquery取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $("select[name=items]
jQuery表单域选择器用法分析

本文实例分析了jQuery表单域选择器用法.分享给大家供大家参考.具体如下: 表单域是指网页中的input,textarea, select和button元素. 1. :input选择器复制代码代码如下: $(":input") 2. :text选择器复制代码代码如下: $(":text") 3. :password选择器复制代码代码如下: $(":password") 4. :radio选择器复制代码代码如下: $("
jQuery-serialize()输出序列化form表单值的方法

实例输出序列化表单值的结果: 复制代码代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语
jquery表单对象属性过滤选择器实例分析

本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
jquery实现ajax提交form表单的方法总结

方法一: 复制代码代码如下: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "P

巧用jQuery选择器提高写表单效率的方法

相关推荐

随机推荐