jQuery中通过data-field属性自动化获取与赋值表单数据
本文介绍在仅使用jQuery而非MVVM框架时，如何通过自定义data-field属性简化表单数据的获取与赋值。通过遍历带有data-field的控件，支持嵌套对象结构，自动构建实体并赋值，避免硬编码ID，提升代码可维护性。
jQuery表单数据处理的背景与问题
熟悉AngularJS的开发者了解，ng支持双向绑定，通过ngModel即可将值绑定到界面。修改值并提交表单时，无需再根据ID重新抓取输入框信息。然而，在前台网站开发中，若不使用AngularJS等MVVM框架，仅引用了，在处理表单时该如何操作？
原始做法：通过ID获取值
一. 原始做法
<div id="form">
<select id='select1'>
<option value="">--请选择--</option>
<option value="1">--1--</option>
<option value="2">--2--</option>
<option value="3">--3--</option>
</select>
<input id='radio1' type="radio" />
<input id='text1' type="text" />
<textarea id='textArea1' ></textarea>
</div>程序员A认为这很简单，通过jQuery根据ID获取每个输入框的值即可。
function getEntity(){
return {
select1:$("#select1").val(),
radio1:$("#radio1").prop('checked'),
text1:$("text1").val(),
textArea1:$("textArea1").val()
}
}升级方案：基于data-field的自动化处理
二. 升级做法.
程序员B指出，如果多个页面都有表单提交，每个地方都使用jQuery获取值会很繁琐。若后续新增输入框，每次修改HTML后还需调整对应的JS代码，十分麻烦。因此，爱偷懒的程序员B想到了一种通过自定义标签来实现的方法。
2.1 我们将表单包装到一个form的div下，每个输入的控件新增一个data-field属性。data-field中填写构建实体的属性名称，考虑到可能出现嵌套对象，data-field中的属性名称通过点号（.）分隔，例如data-field='Person.Name'，后续将构建出{ Person:{ Name:xxx }}。以下示例为没有嵌套对象的场景。
<div id="form">
<select data-field='select1'>
<option value="">--请选择--</option>
<option value="1">--1--</option>
<option value="2">--2--</option>
<option value="3">--3--</option>
</select>
<input data-field='radio1' type="radio" />
<input data-field='text1' type="text" />
<textarea data-field='textArea1'></textarea>
</div>2.2 提供一个getEntity方法。该方法读取外层Form，查找所有data-field属性进行遍历。由于输入框包含checkbox、radio、input和select，需先判断类型以获取值，然后调用getField方法构建实体。此处省略详细代码解答，旨在表达思路。
function getEntity(form) {
var result = {};
$(form).find("[data-field]").each(function() {
var field = $(this).attr("data-field");
var val;
if ($(this).attr('type') == 'checkbox') {
val = $(this).prop('checked');
} else if ($(this).attr('type') == 'radio') {
val = $(this).prop('checked');
} else {
val = $(this).val();
}
// 获取单个属性的值,并扩展到result对象里面
getField(field.split('.'), val, result);
});
return result;
}
function getField(fieldNames, value, result) {
if (fieldNames.length > 1) {
for (var i = 0; i < fieldNames.length - 1; i++) {
if (result[fieldNames[i]] == undefined) {
result[fieldNames[i]] = {}
}
result = result[fieldNames[i]];
}
result[fieldNames[fieldNames.length - 1]] = value;
} else {
result[fieldNames[0]] = value;
}
}
2.3 下面来看看上面输出的结果，值已成功获取。
2.4 下面我们来看看嵌套的对象
<div id="form">
<select data-field='Person.Job'>
<option value="">--职位--</option>
<option value="java工程师">java工程师</option>
<option value="net工程师">.net工程师</option>
<option value="python工程师">python工程师</option>
</select>
<input data-field='Person.Desc' type="text" />
</div>
2.5 提供了获取实体的方法，当然也要提供赋值的方法。下面来看看赋值的方法
function setEntity(form, entity) {
$(form).find("[data-field]").each(function() {
var field = $(this).attr("data-field");
fieldNames = field.split('.');
var value = JSON.parse(JSON.stringify(entity));
for (var index = 0; index < fieldNames.length; index++) {
value = value[fieldNames[index]];
if (!value) {
break;
}
}
if ($(this).attr("type") === "checkbox" ||
$(this).attr("type") === "radio") {
$(this).attr('checked', Boolean(value));
} else {
if (value) {
$(this).val(value);
} else {
$(this).val("");
}
}
})
}
值已成功附上。
总结与展望
三. 总结:
上述内容仅提供了解决方案。尽管前台系统通常不使用React、AngularJS等MVVM框架，而仅使用jQuery，但我们仍可通过某些方法简化项目代码。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持本站！
为什么叫JavaScript：语言命名由来及与Java的历史渊源
2026-11-05 11:37:48
JS获取当前时间年月日时分秒并格式化为YYYY-MM-DD HH：mm：ss
2026-11-04 21:25:21
不同语言间JS与Java/Python加密结果不一致怎么办
2026-11-04 18:27:23
Mock.js 拦截 Axios 和 Fetch 请求的原理与配置方法
2026-11-04 08:13:59
JS怎么获取当前日期并格式化为YYYY-MM-DD
2026-11-03 18:47:03