Javascript 如何提交没有表单的动态数据？

我以JavaBean的形式获取数据，并将每个值插入表中。
首先，以普通方式检索值
但是我添加了一些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>

单词
对话
实践
${engboardVO.word}
${engboardVO.dialogue}
${engboardVO.practice}

和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();
    })
});

$（“body”）。在（“单击”，“数据可编辑]”，函数（）上{
var$el=$（本）；
/*var$input=$（''）.val（$el.text（））*/
var$input=$（''）.val（$el.text（））；
$el.replaceWith（$input）；
var save=function（）{
var$td=$（“”）.text（$input.val（））；
$input.replaceWith（$td）；
};
$（$input）.blur（函数（）{
save（）；
})
});

如果您没有表单或由于某些原因无法拥有表单，请不要担心

您仍然可以读取网页的输入并使用它们或将它们发送到服务器

下面是一个简单的例子：

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
    }
});

var inputs=document.getElementsByTagName（'input'）；
var数据=[]
用于（索引=0；索引

您可以使用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>

现在在服务器端，您需要像在表单提交中正常获取post请求一样获取这些数据，并将这些数据保存在数据库中

url与您在表单标记中提供的操作相同

编辑：

---

现在检查一下。您正在替换td，而您必须替换td中的html。

您要将编辑后的值保存在数据库中还是仅保存在表中？无法理解您的问题。@KiranShahi数据库您有更新该问题的服务或api吗？如果您是指数据库中的更新查询，则还没有。如果只有一个表单，我可以很容易地做到这一点，但由于HTML表格每页包含10行，我不知道如何…您需要制作api，并通过ajax在每次保存时更新每个项目。如果我按照您的建议，我还可以读取标记中的数据吗？因为

td data editable

单元格失去焦点后的代码，每个单元格都会丢失其数据名的值。这使得第二次尝试和之后的尝试没有任何改变。@KimHyungJune，编辑答案：$el.relacewith（$input）；更改为$el.html（$input）；谢谢，但每次我单击任何可编辑单元格并失去控制时，其中的文本都会消失。@KimHyungJune，现在检查。您正在替换td，而您必须在td中替换html。

    $("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();
    })
    });

  $.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
        }
    });