如何在没有表单的情况下提交动态数据？

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

然后在服务器端，您可以将字段值保存为数据库中字段名称的值。

基本上我们在这里做的是：

1. 在td标签中增加了一个属性data-name，它的值可以和你在table中的字段名相关。

2. 使用 var field_name = $el.attr('data-name'); 获取 javascript 中属性的名称。

3. 在 ajax 调用中使用 post 请求将 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. 现在在服务器端，您需要像在提交表单时正常获取 post 请求一样获取此数据，并将此数据保存在数据库中。

5. url 与您在表单标签中提供的操作相同。

编辑： 现在检查。您正在替换 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
    }
});