Layui表单提交时对data.field中字段的取值问题

后台接收页面表单的方式一般来说有两种（ssm来说，我这里用的是Jfinal，类似），
一种是以成员变量的方式接收
另一种是以对象的方式接收
成员变量接收：控制器中方法的形参必须和页面name中的值一样（Jfinal类似，不过没有形参，已封装好，直接 getPara("") 获取）
对象接收：将所有字段映射到数据库表中字段（这也是我下面要说明的情况）

<!-- 假如我数据库有张表，这里不管表名，我在页面中所有的name都是以对象.字段的形式写的，
name在后台我就不用一个个的获取这些参数了，因为后台做了映射，直接getModel()就好了，扯远了，说页面上的事 -->
<form action="" class="layui-form">
	<!-- 为了测试，我这里加一个name不是带有小数点的属性abc -->
	<input type="hidden" name="abc" value="ABC" class="layui-input">
	<input type="hidden" name="us.userId" value="${us.userId!}" class="layui-input">
	<div class="layui-form-item">
		<div class="layui-inline" style="margin-left: 15%;">
			<label class="layui-form-label">姓名:</label>
			<div class="layui-input-inline">
				<input type="text" name="us.name" value="${us.name!}" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
	
			<label class="layui-form-label">住址:</label>
			<div class="layui-input-inline">
				<input type="text" name="us.addr" value="${us.addr!}" lay-verify="required" autocomplete="off" class="layui-input">
			</div>
		</div>
	</div>
	
	<button type="submit" id="tj" class="layui-btn" lay-submit="" lay-filter="save" >保存</button>
</form>

<script type="text/javascript">
	layui.use(['layer','form'],function () {
		var form = layui.form;
		var layer = layui.layer;
		form.on('submit(save)', function(data){
			console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			//获取表中name为abc的值
			var abc = data.field.abc;
			return false;
		})
	})
</script>

如果name中使用了“xx.xxx”的形式，用上面的方法（data.field.xx.xxx）就或取不到值了，会报错说xx is not undefined，不是这么取的，正确的方法应该是这样的data.field["xx.xxx"];

<script type="text/javascript">
	layui.use(['layer','form'],function () {
		var form = layui.form;
		var layer = layui.layer;
		form.on('submit(save)', function(data){
			console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			//获取表中name为abc的值
			var abc = data.field.abc;
			//获取表单中姓名框中的值
			//var name = data.field.us.name;			//这种写法取不到值，会报错
			var name = data.field["us.name"];			//正确的写法
			return false;
		})
	})

name中使用了“xx.xxx”的形式的好处（对于Jfinal来说），如果想要添加一个字段“联系方式”，我就不需要去改后台了，
直接把数据库的字段添加好之后，页面上加一个input框，name写上“us.数据库字段”，这样功能就实现了。
tips: 这个us是随意取的，这里写us的话，后台接收就是us；为Jfinal打个广告，如需了解JFinal，请点击下方链接直达。
Jfinal极速开发框架

标签：name,form,Layui,field,中字,layui,var,data
来源： https://blog.csdn.net/qq_44864879/article/details/111309310