我创建了 html 文件来上传用户数据和图像。它包括动态表，用户可以通过单击添加按钮插入行并通过单击删除按钮删除行。我的表单工作正常，我能够将文件和数据上传到数据库但无法插入动态表格数据，即我将表单字段拆分为表格
1）passengertable：- 插入地标、位置、fromdate、todate、ccn、passenger_number。
2)passengerdetailtable :- pname,pemail,pnumber,passengerid(foriegnkey referencepassengertable) :=这是动态表数据
我的问题是只有 pname,pemail,pnumber 的当前输入值被插入到 mysql 但未插入剩余的动态创建的行数据...
html 文件
<div>
<form action="getPassengerDetail" method="post" enctype="multipart/form-data">
<div>
<label for="lname">LandMark: </label>
<input id="lname" type="text" name="landmark" placeholder="Enter LandMark">
<br>
</div>
<div>
<label for="location" >Vehicle Required From: <span><sup class="red-star">*</sup></span>
</label>
<input id="location" type="text" name="location" placeholder="Enter Location" required>
<input id ="fromdate" name ="fromdate" type="date" placeholder="From Date" required >
<input id="todate" name = "todate" type="date" placeholder="To Date" required>
<br>
<label for="id" id="checkboxlabel">multiple days</label>
<input type="checkbox" name="multiple_days" id="days" >
multiple days
<br>
</div>
<div>
<label for="ccn">Cost Center Number:</label>
<input id="ccn" type="text" name="cost_center_number" placeholder="Enter Cost Center Number">
<br>
</div>
<div>
<label for="pcount">Number Of Passenger:</label>
<input id="pcount" type="number" name="passenger_number" placeholder="Enter Passenger Count">
<br>
</div>
<div>
<label for="passenger_detail_table">Passenger Details :<span><sup class="red-star">*</sup>
</span></label>
<table id="passenger_detail_table" class="tablestyle">
<thead>
<tr valign="top" >
<td>
<label for="pname_" id="small-label">Name</label>
</td>
<td>
<label for="pemail_" id="small-label">E-mail</label>
</td>
<td>
<label for="pnumber_" id="small-label">Phone-Number</label>
</td>
<td>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="pname_" type="text" name="passenger_name[]" value=""
placeholder="Enter Name"onkeyup="this.value=this.value.replace(/[^a-z]/g,'');" class="alphaonly">
</td>
<td>
<input id="pemail_" type="email" name="passenger_email[]" value=""
placeholder="Enter E-mail" >
</td>
<td>
<input id="pnumber_" type="tel" name="passenger_phone_number[]" value=""
placeholder="Enter Phone-No" class="onlyphonenumber" >
</td>
<td>
<button type="button" id="addpassenger" name="passenger_add" style="background-
color:green;color:white;">Add</button>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<label for="crf_trf">CRF/TRF:</label>
<input id="crf_trf" name="crf_trf" type="file" multiple="multiple" value="Choose file">
<br>
</div>
<div>
<label for="ddetail">Duty Detail:</label>
<input id="ddetail" name=ddetail" type="text" width="100px" placeholder="Enter Duty
Detail">
<br>
</div>
<div>
<input type="submit" class="button" value="Submit" name="insert">
</div>
</form>
</div>
jQuery代码
$(document).ready(function()
{
const maxCounter = 10;
let passengerCounter;
const $tb = $("#passenger_detail_table tbody ");
$('#addpassenger').on('click',function(e)
{
const pname = $.trim($("#pname_").val());
const pemail = $.trim($("#pemail_").val());
const pnumber = $.trim($("#pnumber_").val());
if(pname === "" || pemail === "" || pnumber === "")
{
alert("please enter the values...");
return;
}
passengerCounter = $tb.find("tr").length;
if (passengerCounter >= maxCounter)
{
alert("No more data to be placed")
return;
}
alert("The counter clicked."+passengerCounter);
const $firstRow = $tb.find(">:first-child");
let $newrowhtml = $firstRow.clone(true);
$firstRow.find(":input").val("");
$newrowhtml.find(":input")
.removeAttr("id","")
.attr('disabled', 'disabled');
$newrowhtml.find("[name=passenger_name]").val(pname);
$newrowhtml.find("[name=passenger_email]").val(pemail);
$newrowhtml.find("[name=passenger_phone_number]").val(pnumber);
$newrowhtml.find("[name=passenger_add]").replaceWith($('<button type="button"
style="background-color:red; color:white;" class="passenger_remove">Remove</button>'));
$("#passenger_detail_table").append($newrowhtml);
});
$("#passenger_detail_table").on('click', '.passenger_remove', function() {
$(this).closest("tr").remove();
});
servlet 文件：此 servlet 文件充当 html 函数调用的控制器，以向数据库添加详细信息
@WebServlet("/getPassengerDetail")
@MultipartConfig(fileSizeThreshold=1024*1024*10,
maxFileSize=1024*1024*50,
maxRequestSize=1024*1024*100)
public class getPassengerDetailServlet extends HttpServlet
{
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
{
try
{
String JDBC_Driver ="com.mysql.jdbc.Driver";
String URL ="jdbc:mysql://localhost/passengerdetail";
String username = "root";
String password = "root";
InputStream inputStream = null;
String landmark = request.getParameter("landmark");
String location = request.getParameter("location");
String fromdate = request.getParameter("fromdate");
String todate = request.getParameter("todate");
String ccn =request.getParameter("cost_center_number");
String pcount = request.getParameter("passenger_number");
String pname[] = request.getParameterValues("passenger_name[]");
String pemail[] = request.getParameterValues("passenger_email[]");
String pnumber[] =request.getParameterValues("passenger_phone_number[]");
String ddetail = request.getParameter("ddetail");
PrintWriter out = response.getWriter();
out.println(landmark+location+fromdate+todate+ccn+pcount);
// obtains the upload file part in this multipart request
Part crf_trf = request.getPart("crf_trf");
if (crf_trf != null)
{
inputStream = crf_trf.getInputStream();
}
out.println(crf_trf);
Class.forName(JDBC_Driver);
Connection con = DriverManager.getConnection(URL, username, password);
String query1 = "insert into passengertable
(landmarkname,location,fromdate,todate,ccn,pcount,crf_trf,dutydetail) values(?,?,?,?,?,?,?,?)";
PreparedStatement pstm = con.prepareStatement(query1,Statement.RETURN_GENERATED_KEYS);
pstm.setString(1, landmark);
pstm.setString(2, location);
pstm.setString(3, fromdate);
pstm.setString(4, todate);
pstm.setString(5, ccn);
pstm.setString(6, pcount);
if (inputStream != null) {
// fetches input stream of the upload file for the blob column
pstm.setBlob(7, inputStream);
}
pstm.setString(8, ddetail);
int row1=pstm.executeUpdate();
ResultSet rs = pstm.getGeneratedKeys();
int id=0;
while(rs.next())
{
id=rs.getInt(1);
}
String query2="insert into passengerdetailtable(pname,pemail,pnumber,passengerid)
values(?,?,?,?)";
int row2 = 0;
PreparedStatement pstmt;
for(int i=0;i<pname.length;i++)
{
pstmt = con.prepareStatement(query2);
pstmt.setString(1, pname[i]);
pstmt.setString(2, pemail[i]);
pstmt.setString(3, pnumber[i]);
pstmt.setInt(4, id);
row2=pstmt.executeUpdate();
}
if ((row1 > 0)&&(row2>0)) {
response.sendRedirect("Detail.jsp");
}
else{
response.sendRedirect("EntryForm.html");
}
}
catch(Exception e)
{
e.printStackTrace();
}
}
}