我以 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();
})
});
最佳答案
您可以使用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 的值保存在数据库中。
基本上我们在这里做的是:
在td标签中添加了一个属性data-name,它的值可以与您表中的字段名称相关。
使用 var field_name = $el.attr('data-name'); 在 javascript 中获取属性名称。
在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 } });
现在在服务器端,您需要像正常获取表单提交中的 post 请求一样获取此数据,并将此数据保存在数据库中。
- url 与您在表单标记中提供的操作相同。
编辑: 现在检查。您正在替换 td,而您必须替换 td 内的 html。
关于javascript - 如何在没有表单的情况下提交动态数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51257237/