<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会说,So easy，通过Jquery id 去获取每个输⼊框的值就OK。多简单。
function getEntity(){
return {
select1:$("#select1").val(),
angular和angularjsradio1:$("#radio1").prop('checked'),
text1:$("text1").val(),
textArea1:$("textArea1").val()
}
}
⼆. 升级做法.
程序员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⼯程师">⼯程师</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("");
}
}
})
}
呵呵，值附上去了.
三. 总结:
上⾯只是提供了解决⽅案, 虽然前台系统，不会考虑像后台backend 系统那样，⽤react,angularjs这种MVVM框架, 虽然只是⽤了⼀个Jquery⽽已。不过我们还是可以通过⼀些⽅法来简化项⽬代码的。
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤
家可以留⾔交流，同时也希望多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000602
发表评论