使用来自 javascript innerHtml 的 thymeleaf 将数据传递给 Spring Boot 控制器

Question

我将在 javascript 中创建表格行，在表格行中我有一些输入字段，现在我想使用百里香访问这些字段中的数据

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>';

    }

Answer 1

您需要为每个输入添加一个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 代码包装在一个表单中。当然，您需要复制代码，因为您需要编辑和删除表单。

希望对你有帮助。