### Layui Form 模块通过基础 JSON 进行自定义配置 Layui 是一个前端框架，其 `form` 模块提供了灵活的方式来处理表单事件以及动态渲染表单项。如果希望基于 JSON 数据实现自定义配置并初始化表单字段，可以通过以下方式完成。 #### 动态加载 JSON 配置 可以先从服务器端请求 JSON 数据或者直接在客户端定义 JSON 对象作为初始数据源。以下是具体实现： ```javascript // 假设这是来自服务端的基础JSON配置 var formData = { title: "默认标题", address: "默认地址", description: "这是一个描述" }; // 初始化表单 layui.use(['form'], function() { var form = layui.form; // 将 JSON 数据填充到表单中 form.val('example', { // 'example' 表单容器的 lay-filter 属性值 "title": formData.title, "address": formData.address, "description": formData.description }); // 提交监听事件 form.on('submit(submitForm)', function(data) { console.log(data.field); // 获取表单中的所有字段及其值 return false; // 阻止表单跳转。如果需要表单跳转，去掉这句。 }); }); ``` #### HTML 结构示例 为了使上述 JavaScript 能够正常工作，HTML 中需设置好相应的表单结构，并指定 `lay-filter` 和 `name` 属性以便于绑定和读取数据。 ```html <form class="layui-form" action="" lay-filter="example"> <div class="layui-form-item"> <label class="layui-form-label">标题</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="address" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">描述</label> <div class="layui-input-block"> <textarea name="description" placeholder="请输入描述" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button> </div> </form> ``` 以上代码展示了如何利用 JSON 数据动态初始化表单字段[^1]，并通过 `form.on()` 方法捕获表单提交事件以进一步操作或发送至后台[^2]。 #### 后台接收参数示例 (Java Spring Boot) 当表单被提交后，通常会将这些数据传递给后端接口进行处理。假设使用的是 Java Spring Boot，则可以在 Controller 中设计如下方法来接受参数[^2]: ```java @RestController @RequestMapping("/api/form") public class FormDataController { @PostMapping("/save") public ResponseEntity<String> saveFormData( @RequestParam(value = "title", required = true) String title, @RequestParam(value = "address", required = true) String address, @RequestParam(value = "description", required = false) String description) { System.out.println("Title: " + title); System.out.println("Address: " + address); System.out.println("Description: " + description); return ResponseEntity.ok("Success"); } } ``` 此部分实现了从前端接收到的数据映射到后端变量的功能[^2]。 --- ###