任何接触过Angularjs的人都知道ng支持双向绑定，我们可以通过ngModel轻松地将我们的值绑定到接口。在修改值和提交表单时，我们不需要通过ID重新抓取输入框信息。那么，对于我们开发的前端网站，我们没有像ng一样使用MVVM框架，只参考Jquery，那么处理表单的时候应该怎么做呢？

一、原创实践

div id=' form ' select id=' select 1 ' Option value=' '-请选择-/Option Option value=' 1 '-1-/Option Option value=' 2 '-2-/Option Option value=' 3 '-3-/Option/select input id=' radio 1 ' type=' radio '/input id=' text 1 ' type=' text '/text area id=' text area 1 '/div程序员a会说，这么简单，通过Jquery id获取每个输入框的值就可以了。多么简单。

函数get entity(){ return { select 1: $(' # select 1 ')。val()，radio1: $ ('# radio1 ')。道具('选中')，text1: $ ('text1 ')。val()，textarea133366。

程序员B说，这个不行。很多页面都有表单要提交，所以不是每个地方都需要使用Jquery来获取值。如果以后再增加一个输入框，每次修改HTML都要修改对应的JS，比较麻烦。所以懒惰的程序员B想到了一个通过定制标签来实现的方法。

2.1我们将表单包装在表单的div下，并为每个输入控件添加一个新的数据字段属性。考虑到嵌套对象，建筑实体的属性名称被写入数据字段。因此，数据字段中的属性名用点分隔。例如，{ person: { name3360xxx } }将在数据字段='Person '后生成。名字。下面是一个没有嵌套的对象示例

div id=' form ' select data-field=' select 1 ' Option value=' '-请选择-/Option Option value=' 1 '-1-/Option Option Option value=' 2 '-2-/Option Option value=' 3 '-3-/Option/select input data-field=' radio 1 ' type=' radio '/input data-field=' text area 1 '/text area/div 2.2提供了一个getEntity方法。阅读外部表单，找到所有要遍历的数据字段属性。因为输入框有复选框、单选、输入和选择，所以应该先取出值。然后调用getField方法构建实体。代码不会详细回答。应该可以理解。我只想表达我的想法。

函数getEntity(form){ var result={ }；$(表单)。查找('[数据字段])。每个(函数(){ var field=$(this))。attr('数据字段')；var valif ($(this)。attr(' type ')==' checkbox '){ val=$(this)。道具('选中')；} else if ($(this)。attr(' type ')==' radio '){ val=$(this)。道具('选中')；} else { val=$(this)。val()；}//获取单个属性的值，并将其扩展到getfield (field。拆分('.')，val，result)在结果对象中；});返回结果；}函数getField(fieldNames，value，result){ if(FieldNames . length 1){ for(var I=0；I FieldNames . length-1；I){ if(result[field name[I]===undefined){ result[field name[I]]={ } } result=result[field name[I]]；}结果[字段名称[字段名称.长度- 1]]=值；} else { result[field name[0]]=value；}}2.3我们来看看上面的输出结果，哈哈，得出值了。

2.4让我们来看看嵌套对象

Div id=' form '选择数据字段=' person。作业'选项值=' '-职位-/选项选项值=' Java engineer ' Java engineer/选项选项值=' net engineer '。网络工程师/选项选项值='python工程师' python工程师/选项/选择输入数据-字段=' person.desc '类型=' text '/div

2.5提供了获取实体的方法，当然也提供了赋值的方法。让我们来看看分配方法

函数setEntity(窗体，实体){ $(窗体)。查找('[数据字段])。每个(函数(){ var field=$(this))。attr('数据字段')；fieldNames=field.split(' . ');var值=JSON.parse(JSON.stringify(实体))；for (var索引=0；索引字段名称。长度；index){ value=value[field names[index]]；if(！value){ break；} } if ($(this)。attr('type')==='checkbox' || $(这个)。attr('type')==='radio') { $(this)。attr('checked '，布尔值(value))；} else { if (value) { $(this)。val(值)；} else { $(this)。val(“”)；} } })}

呵呵，价值附后。

三.摘要：

以上只是提供了一个解决方案，虽然前台系统不会像后端系统那样考虑使用react和angular js等MVVM框架，尽管它只使用了一个Jquery。但是，有一些方法可以简化项目代码。

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流，希望多多支持我们！