jqueryで作成された複数の行を挿入する方法

Question

Mysqlデータベースに複数の行を挿入しようとしていますが、ユーザがEnterキーを押したときにjqueryを使用するため、複数行を挿入しません。 ...これで、私は三つのファイル（HTML）（jQueryの）（DBとJSP）

HTML

<form action="newjsp.jsp" method="post">   
     <table width="500" border="1"> 
    <tr> 
     <td>No.</td> 
     <td>Name</td> 
     <td>Age</td> 
     <td>Phone</td> 
     <td>Email</td> 
    </tr> 
<tr> 
     <td>1</td> 
     <td><input type="text" class="inputs" name="name_1" id="name_1" /></td> 
     <td><input type="text" class="inputs" name="age_1" id="age_1" /></td> 
     <td><input type="text" class="inputs" name="phone_1" id="phone_1" /></td> 
     <td><input type="text" class="inputs lst" name="email_1" id="email_1"/></td> 

     </tr> 
</table> 
       <input type="submit" value="submit"/>   
     </form> 
     </body> 
     </html> 

jQueryの

<script> 

var i = $('table tr').length; 

を持っています

この行を作成しjqueryのあるユーザーを押してキーを入力

$(document).on('keyup', '.lst', function(e) 
{ 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
    html = '<tr>'; 
    html += '<form action="newjsp.jsp" method="post">'; 
    html += '<td>' + i + '</td>'; 
    html += '<td><input type="text" class="inputs" name="name_' + i + '" id="name_' + i + '" /></td>'; 
    html += '<td><input type="text" class="inputs" name="age_' + i + '" id="age_' + i + '" /></td>'; 
    html += '<td><input type="text" class="inputs" name="phone_' + i + '" id="phone_' + i + '" /></td>'; 
    html += '<td><input type="text" class="inputs lst" name="email_' + i + '" id="email_ ' + i + '"/></td>'; 
    html += '</form>'; 
    html += '</tr>'; 
    $('table').append(html); 
    $(this).focus().select(); 
    i++; 
    } 
}); 

$(document).on('keydown', '.inputs', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
    var index = $('.inputs').index(this) + 1; 
    $('.inputs').eq(index).focus(); 
    } 
}); 

$(document).keypress(
    function(event){ 
    if (event.which == '13') { 
     event.preventDefault(); 
     } 


}); 
    </script> 

データベースの挿入JSP

<% 
     try 
     { 
      String name=null; 
      String age=null; 
      String phone=null; 
      String email=null; 

    **This is parameters** 

      name=request.getParameter("name_1"); 
      age=request.getParameter("age_1"); 
      phone=request.getParameter("phone_1"); 
      email=request.getParameter("email_1"); 


      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/atm","root","root"); 
      Statement st=con.createStatement(); 

      int o=st.executeUpdate("INSERT INTO jquery values('"+name+"','"+age+"','"+phone+"','"+email+"')"); 
      out.print("Success"); 
     } 



     catch(Exception e) 
     { 
      System.out.println(e); 
     } 

     %> 

Answer 1

あなたは、単一のコマンドを使用して、テーブルにinsert複数の行にできます、 like：

INSERT INTO jquery values('name1','age1','phone1','email1') 
        ,values('name2','age2','phone2','email2') 
        ,values('name3','age3','phone3','email3') 
        ,values('name4','age4','phone4','email4') 
        ,values('name5','age5','phone5','email5') 

しかし、あなたはあなたが持っている行の数を確認する必要があります。特定のインデックスを持つリクエストパラメータが見つからなくなるか、クライアント側から最後のインデックスを渡すことができるようになるまで繰り返すことができます。後者は、作業を簡素化するのでよりスマートです。行数を保持する変数countがあるとします。そして、このコードは動作するはずですしながら、SQL injectionとXSS injectionの傾向があるので、

String query = "INSERT INTO jquery "; 
for (int i = 0; i < count; i++) { 
      name=request.getParameter("name_" + i); 
      age=request.getParameter("age_" + i); 
      phone=request.getParameter("phone_" + i); 
      email=request.getParameter("email_" + i); 

      query += ((i == 0) ? "values" : ",") + "('"+name+"','"+age+"','"+phone+"','"+email+"')"; 
} 
      Class.forName("com.mysql.jdbc.Driver"); 
      Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/atm","root","root"); 
      Statement st=con.createStatement(); 

      int o=st.executeUpdate(query); 

しかし、それは、非常に安全ではありません。システムがそのような攻撃から保護されていることを確認する必要があります。