javascript - 在jsp中动态创建输入框并发送到servlet

Question

我创建了一个 jsp，它有一个动态添加输入框的脚本，问题是我不知道如何将它扔到 servlet 上，以便将数据从这些动态输入框保存到数据库。请帮助我。

var i = 1;

<form id="add_pname" name="add_pname"><table class="table table-bordered" id="dynamic_field">
<tr>
 <td><select name="txtProduct" id="txtProduct" class="form-control        name_list" ><option value="">- Product -</option><%=obj.getProductOpt("")%></select></td>
</tr></table></form>

//添加输入框

$('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td><select name="txtProduct" id="txtProduct" class="form-control name_list" ><option value="">- Product -</option><%=obj.getProductOpt("")%></select></td><td><input type="text" name="txtQty" id="txtQty'+i+'" class="form-control"/></td><td><input type="button" name="remove" value="X" id="'+i+'" class="btn btn-danger btn_remove"/> </td></tr>');
});

//删除输入框

$(document).on('click', '.btn_remove', function(){
    var button_id = $(this).attr("id");
    $('#row'+button_id+'').remove();
});

我想将所有添加的输入框传递给servlet并将其保存到数据库中。请帮助我

Answer 1

嗯，有不同的方法可以解决这个问题，让我们描述其中的两种。

客户端方法

我将向表单添加一个提交处理程序 (submit="myHandler()")，在其中循环遍历所有表行，获取下拉值 (txtProduct )和文本值(txtQty)，将它们组合成一个对象，将该对象添加到一个数组中，然后通过标准 POST 表单提交(例如字符串化为隐藏表单字段)，或通过 AJAX 调用。

然后，Servlet 需要反序列化数据并创建其 Java 表示形式以将其存储到数据库中。

服务器端方法

动态添加输入字段时，不要使用相同的名称，而是添加一个计数器，这样您将拥有包含 txtProduct1 和 txtQty1 的表行，然后txtProduct2 + txtQty2，依此类推。然后只需使用普通表单提交将表单发送到 servlet。

然后 servlet 需要迭代请求参数(例如 https://stackoverflow.com/a/2595272/3511123 )获取所有 txtProductX 和 txtQtyX 参数及其值，将它们组合起来(因为感谢编号清楚哪个数量属于哪个产品)，并存储到数据库中。

抱歉没有代码，但是如果有代码示例，这将是一篇文章/教程，而不是一个简单的答案。如果您需要特定步骤的帮助，请随时提出新问题(在进行明显的谷歌搜索之后)。