Передача данных в весенний загрузочный контроллер с использованием тимилиф

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-код в форму. Конечно, вам нужно будет продублировать ваш код, так как вам потребуется форма редактирования и удаления.

Надеюсь, это поможет.