javascript - 使用来自 javascript innerHtml 的 thymeleaf 将数据传递给 Spring Boot 控制器
问题描述
我将在 javascript 中创建表格行,在表格行中我有一些输入字段,现在我想使用 thymeleaf 从这些字段中访问数据
function myCreateFunction2() {
var table = document.getElementById("mdlTable2");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Item";
cell2.innerHTML = '<input id="item" type="number" value="">';
cell3.innerHTML = "UOM";
cell4.innerHTML = '<textarea></textarea>';
cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
}
解决方案
您需要为name
每个输入添加一个,然后在您的控制器上,询问这些参数。假设您期望的 url 是/edit
.
JS
function myCreateFunction2() {
var table = document.getElementById("mdlTable2");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = "Item";
cell2.innerHTML = '<input id="item" type="number" value="" name="id">';
cell3.innerHTML = "UOM";
cell4.innerHTML = '<textarea id="description" name="description"></textarea>';
cell5.innerHTML = '<button type="submit" value="save" class="btn btn-success btn-sm" onclick="save()">Save</button></form>';
cell6.innerHTML = '<button type="button" class="btn btn-danger btn-sm" onclick="myDeleteFunction2()">Remove</button>';
}
控制器
@RequestMapping(value = "/edit", method = RequestMethod.POST)
public String edit(@RequestParam("id") String id,
@RequestParam("description") String description { ... }
保存 (JS)
现在,由于您没有表单,如果您想提交数据,您将需要一个。在这种情况下,我们将使用javascript
.
function save() {
// First, let's create the form.
var form = document.createElement("form");
form.method = "POST";
form.action = "/edit";
// Now, let's add the inputs.
var id = document.getElementById('id');
var description = document.getElementBy('description');
form.appendChild(id);
form.appendChild(description);
// Submit the form.
document.body.appendChild(form);
form.submit();
}
另一种更简单的方法是将您的 html 代码包装在一个表单中。当然,您需要复制代码,因为您需要编辑和删除表单。
希望能帮助到你。
推荐阅读
- html - 使用 Twing 转义 HTML 标签
- html - 如何在 Materialise CSS 中调整导航链接的高度和面积?
- change-data-capture - 如何在 Scylla 中获取特定分区键的流 ID
- android - 图像到二进制值 - 像素值
- spring - Spring Boot / JPA / H2 - 找不到表
- javascript - 将 ESlint 与 expressjs 一起使用
- javascript - 在 MVC 中向 bootstrapTable 添加删除按钮
- stata - Stata:删除非唯一重复项
- visual-studio - 我们如何在 Visual Studio 中更改工具窗口标题栏的高度?
- python - 当我从 Django 中的查询中删除所有项目时,项目 ID 不会重置