沒有表格如何提交動態數據？

Question

我以Java Bean的形式獲取數據，並將每個值插入表中。
首先，以常見方式檢索值。
但是，我添加了一些Javascript源，以便在單擊附近的任何區域時都可以修改該值。
現在，如果修改后有任何更改，我也想將數據保存在數據庫中。
我怎樣才能做到這一點？

這是我的HTML代碼

<table class="bg-light table table-hover" style="overflow:hidden">
    <th>Word</th>
    <th>Dialogue</th>
    <th>Practice</th>
    <c:forEach items="${list}" var="engboardVO">
    <tr>
        <td data-editable>${engboardVO.word}</td>
        <td data-editable>${engboardVO.dialogue}</td>
        <td data-editable>${engboardVO.practice}</td>
    </tr>
    </c:forEach>
</table>

和Javascript

$("body").on("click", "[data-editable]", function() {
    var $el = $(this);
    /*  var $input = $('<input style="width:500px; height:100px"/>').val( $el.text() ); */
    var $input = $('<textarea rows=5 style="width:500px"/>').val($el.text());
    $el.replaceWith($input);
    var save = function() {
        var $td = $("<td data-editable />").text($input.val());
        $input.replaceWith($td);
    };
    $($input).blur(function() {
        save();
    })
});

Answer 1

您可以使用ajax提交無格式的數據。 我可以看到您正在使用jQuery庫。 因此，我正在基於該庫編寫代碼。

在HTML中：

<table class="bg-light table table-hover" style="overflow:hidden">
    <th>Word</th>
    <th>Dialogue</th>
    <th>Practice</th>
    <c:forEach items="${list}" var="engboardVO">
    <tr>
        <td data-name="word" data-editable>${engboardVO.word}</td>
        <td data-name="dialogue" data-editable>${engboardVO.dialogue}</td>
        <td data-name="practice" data-editable>${engboardVO.practice}</td>
    </tr>
    </c:forEach>
</table>

在javascript中：

    $("body").on("click", "[data-editable]", function() {
    var $el = $(this);

    var $input = $('<textarea rows=5 style="width:500px"/>').val($el.text());
    $el.html($input);
    var field_name = $el.attr('data-name');
    var save = function() {
        var $val= $input.val();

        $.ajax({
            type: "POST",
            url: "update-url",
            data: {fieldname: field_name, fieldvalue:$input.val()},
            dataType: "json",
            success: function(msg) {
               // do something on success
                $el.html($val);
            },
            error: function(msg){
              // do something on error
            }
        });
    };
    $($input).blur(function() {
        save();
    })
    });

然后在服務器端，您可以將fieldvalue作為fieldname的值保存在數據庫中。

基本上，我們在這里做的是：

1. 在td標簽中添加了屬性data-name，其值可以與表中的字段名稱相關。

2. 使用var field_name = $ el.attr（'data-name'）;獲取javascript中的屬性名稱。

3. 在ajax調用中使用post request將field_name和此字段的值傳遞給服務器。

     $.ajax({ type: "POST", url: "update-url", data: {fieldname: field_name, fieldvalue:$input.val()}, dataType: "json", success: function(msg) { // do something on success $el.html($val); }, error: function(msg){ // do something on error } }); 

4. 現在在服務器端，您需要按正常方式獲取數據以提交表單提交中的后處理請求，並將此數據保存在數據庫中。

5. url與您在form標簽中提供的操作相同。

編輯：現在檢查。 您正在替換td，而必須替換td內部的html。

Answer 2

如果您沒有表格或由於某些原因而沒有表格，請不要擔心

您仍然可以閱讀網頁的輸入並使用它們或將其發送到服務器。

參見下面的簡單示例：

var inputs = document.getElementsByTagName('input');
var data = []
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
    data.push(inputs[index].value)
}

var json = JSON2.stringify(data);

$.ajax({
    type: "POST",
    url: "your-api-url",
    data: json,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        // done code
    }
});