如何从创建的动态文本框向 servlet 发送值

Question

如何将值从 jsp 传递到 servlet ？ Jsp中有动态创建的输入框。

    <input type="text" class="form-control" placeholder="Qty" min="0" 
     onkeypress="return newTextBox(event)">

这一行在 html 中，通过它创建文本框。

<script>
/* starts here for the dynamic page*/
var instance = 0;

function newTextBox(event) {

    instance++;
    var x = event.which || event.keyCode;
    if (x == 13) {

        var table = document.getElementById('tableOne');

        var rowCount = document.getElementById('tableOne').rows.length;

        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);

        // cell1 starts here//
        var newInput1 = document.createElement("input");

        newInput1.id = "itemId" + instance;

        newInput1.name = "itemId" + instance;

        newInput1.type = "text";

        newInput1.className = "form-control";

        newInput1.placeholder = "Item Id";

        event.target.onkeypress = null;
        newInput1.style.marginBottom = "5px";
        newInput1.style.marginTop = "5px";



        var newDiv1 = document.createElement("div");

        newDiv1.className = "col-md-4";

        newDiv1.appendChild(newInput1);


        var newDiv1Form = document.createElement("div");
        newDiv1Form.className = "form-group";

        newDiv1Form.appendChild(newDiv1);



        //item item one//   
        var newInput2 = document.createElement("input");

        newInput2.id = "itemNum" + instance;

        newInput2.name = "itemNum" + instance;

        newInput2.type = "text";

        newInput2.className = "form-control";

        newInput2.placeholder = "Item Num";

        event.target.onkeypress = null;

        newInput2.style.marginBottom = "5px";
        newInput2.style.marginTop = "5px";



        var newDiv2 = document.createElement("div");

        newDiv2.className = "col-md-7";

        newDiv2.appendChild(newInput2);




        newDiv1Form.appendChild(newDiv2);


        var newDiv1Row = document.createElement("div");
        newDiv1Row.className = "row";

        newDiv1Row.appendChild(newDiv1Form);

        cell1.appendChild(newDiv1Row);

        // cell1 ends here//

        //cell2 starts here but named as cell 3 //
        var cell3 = row.insertCell(1);

        var newInput3 = document.createElement("input");
        newInput3.id = "qty" + instance;
        newInput3.name = "qty" + instance;
        newInput3.type = "text";
        newInput3.className = "form-control";
        newInput3.placeholder = "Qty";
        newInput3.onkeypress = newTextBox;
        // Line added
        event.target.onkeypress = null;
        newInput3.style.marginBottom = "5px";
        newInput3.style.marginTop = "5px";

        var newDiv3 = document.createElement("div");
        newDiv3.className = "col-md-10";

        newDiv3.appendChild(newInput3);



        newDiv3form = document.createElement("div");
        newDiv3form.className = "form-group";

        newDiv3form.appendChild(newDiv3);

        newDiv3Row = document.createElement("div");
        newDiv3Row.className = "row";
        newDiv3Row.appendChild(newDiv3form);
        cell3.appendChild(newDiv3Row);

        //cell 2 ends here but cell 3 name is taken//

        //cell 3 starts here with cell 4 name//

        var cell4 = row.insertCell(2);

        var newInput4 = document.createElement("input");
        newInput4.id = "unitPrice" + instance;
        newInput4.name = "unitPrice" + instance;
        newInput4.type = "text";
        newInput4.className = "form-control";
        newInput4.placeholder = "Price(Rs)";
        newInput4.style.marginBottom = "5px";
        newInput4.style.marginTop = "5px";

        var newDiv4 = document.createElement("div");
        newDiv4.className = "col-md-10";

        newDiv4.appendChild(newInput4);



        newDiv4form = document.createElement("div");
        newDiv4form.className = "form-group";

        newDiv4form.appendChild(newDiv4);

        newDiv4Row = document.createElement("div");
        newDiv4Row.className = "row";
        newDiv4Row.appendChild(newDiv4form);
        cell4.appendChild(newDiv4Row);

        //cell 3 starts here with cell 4 name//

        //cell 4 starts here with cell 5 name//

        var cell5 = row.insertCell(3);

        var newInput5 = document.createElement("input");
        newInput5.id = "amountPrice" + instance;
        newInput5.name = "amountPrice" + instance;
        newInput5.type = "text";
        newInput5.className = "form-control";
        newInput5.placeholder = "Price(Rs)";
        newInput5.style.marginBottom = "5px";
        newInput5.style.marginTop = "5px";

        var newDiv5 = document.createElement("div");
        newDiv5.className = "col-md-10";

        newDiv5.appendChild(newInput5);



        newDiv5form = document.createElement("div");
        newDiv5form.className = "form-group";

        newDiv5form.appendChild(newDiv5);

        newDiv5Row = document.createElement("div");
        newDiv5Row.className = "row";
        newDiv5Row.appendChild(newDiv5form);
        cell5.appendChild(newDiv5Row);

        //cell 4 ends here with cell 5 name//

        //cell 5 ends here with cell 6 name//
        var cell6 = row.insertCell(4);
        var spanOne = document.createElement("span");

        spanOne.id = "spanOne" + instance;
        spanOne.className = "glyphicon glyphicon-remove-sign col-md-offset-5";

        spanOne.style.lineHeight = "2.5";
        spanOne.style.marginBottom = "5px";
        spanOne.style.marginTop = "5px";
        spanOne.onclick = deleteRowOne;

        cell6.appendChild(spanOne);


    }


}

/*ends here for the dynamic page*/
</script>

这是动态创建文本框的代码。 如何将值从 jsp 传递给 servlet

Answer 1

您要做的是将值从客户端传递到服务器端。 您可以使用表单提交或 ajax 将值提交到服务器。

Answer 2

在你的jsp中添加文本框后，如果你想继续使用servlet，那么你可以简单地动态提交表单并在这个表单中包含新的文本框，或者你可以编写ajax来从新创建的文本框中获取数据到servlet。

Answer 3

你可以通过两种方式做到这一点

1. 创建这些元素后，将其附加到您的表单中，并通过 ajax 调用将数据发送到 Servlet。

       var clone = document.createElement('INPUT');
          clone.type="text";
          clone = elem.cloneNode(true);
          clone.setAttribute("id", "file_"+index);
          clone.setAttribute("name", "file_"+index);
          $('#myform').append(clone);   
       var formData = new FormData($('#myform')[0]);
   and send this form data in your ajax call as below : 
   
   $.ajax({
               url : "ServletName" ,
               type : "POST",
               dataType : 'text',
               contentType : false,
               processData : false,
               cache : false,
               async: false,
               data : formData,
               success : function(response) {
                 $console.text('Successfully saved.');
               },
               error : function() {
                 $console.text("Failure");
               }
             });
   

2. 只需使用 &parametername=parametervalue 将您的额外字段作为参数发送到您的 servlet

   var pvalue = document.getElementById("dynamicfield").value;

或

var pvalue = $("#dynamicfield").val();

$.ajax({
            url : "servletname?" + "&pname=" + pvalue,
            type : "POST",
            dataType : 'text',
            contentType : false,
            processData : false,
            cache : false,
            async: false,
            success : function(response) {
              $console.text('Successfully saved.');
            },
            error : function() {
              $console.text("failure");
            }
          });