前端动态增加和删除输入框,后端怎么接收,及实现CRUD操作,easyui+ssm实现
时间: 2024-03-19 22:45:43 浏览: 66
SSM-CRUD源代码,能实现基本的增加,删除,编辑操作,分页
前端动态增加和删除输入框的实现可以使用 jQuery 或者原生 JavaScript,通过 DOM 操作来实现。具体可以参考以下代码:
```
// 添加输入框
$("#addBtn").click(function() {
var inputHtml = '<input type="text" name="inputs[]" />';
$("#inputContainer").append(inputHtml);
});
// 删除输入框
$("#delBtn").click(function() {
$("#inputContainer input:last-child").remove();
});
```
其中,`#addBtn` 和 `#delBtn` 分别是添加和删除按钮的 ID,`#inputContainer` 是存放输入框的容器的 ID。
后端接收动态增加的输入框数据可以通过 Spring MVC 的 @RequestParam 注解来实现。具体代码如下:
```
@RequestMapping(value = "/submit", method = RequestMethod.POST)
public String submit(@RequestParam("inputs[]") List<String> inputs, Model model) {
// 处理数据
model.addAttribute("result", "success");
return "result";
}
```
其中 `@RequestParam("inputs[]")` 表示接收名为 `inputs[]` 的数组参数,对应前端动态增加的输入框的 name 属性。
实现 CRUD 操作可以使用 MyBatis 或者 Hibernate 等 ORM 框架。具体可以参考以下代码:
```
// 查询数据
List<Data> dataList = dataMapper.selectAll();
// 新增数据
Data data = new Data();
data.setName("test");
dataMapper.insert(data);
// 修改数据
Data data = dataMapper.selectById(1);
data.setName("test2");
dataMapper.update(data);
// 删除数据
dataMapper.deleteById(1);
```
其中,`Data` 是数据实体类,`dataMapper` 是对应的 Mapper 接口,可以使用 MyBatis Generator 自动生成。
阅读全文