我使用这个js代码向html表添加一个新行并添加ajax（）调用以使用Jquery UI Autocomplete
trd += "<tr>";
trd += "<td id='table_id' name='table_id' style='width: 10px; text-align: center; vertical-align:middle; display:none ;'></td>";
var appendCustodianTxt = "<td name='cus'><input class='form-control custodianautocomplete' name='custodianID' type='text' placeholder='Custodian' required/></td>";
trd += appendCustodianTxt;
trd += "</tr>";
$("table tbody").append(trd);
$("tr").find("cus").append(appendCustodianTxt);
$('.custodianautocomplete').autocomplete({
source: "./emplist.jsp"
}).focus(function() { $(this).find('input').select(); $(this).select(); });
emplist.jsp代码就像这样
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="com.mysql.*" %>
<%@page import="java.sql.*"%>
<%@page import="java.util.*"%>
<%
try{
String s[]=null;
Class.forName("com.mysql.jdbc.Driver"); // MySQL database connection
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/chbs?" + "user=root&password=rama30");
Statement stmt=conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from users");
List rowValues = new ArrayList();
while (rs.next()) {
rowValues.add(rs.getString("users.Employee_ID"));
}
contactListNames = (String[]) rowValues.toArray(new String[rowValues.size()]);
//response.getWriter().println(json_encode(contactListNames));
response.getWriter().println(contactListNames);
rs.close();
stmt.close();
conn.close();
}
catch(Exception e){
e.printStackTrace();
}
%>
我在Console.log中收到此错误
jquery-3.2.1.min.js:3049 GET http://localhost:8091/chbs/adm/emplist.jsp?term=1 500 (Internal Server Error)
我正在努力但无法在自动完成中获得结果。我没有使用Eclipse，而是使用文本编辑器直接编码。请告知错误的位置。
答案 0 :(得分：0)
我删除了与之无关的部分代码。但我明白了......
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import="com.mysql.*" %>
<%@ page import="java.sql.*" %>
<%@page import="java.util.ArrayList"%>
<%
if ((session.getAttribute("emp_id") == null) || (session.getAttribute("emp_id") == "")) {
%>
<script>
window.alert("You are not logged in");
window.location.href = "/chbs/index.jsp";
</script>
<%} else {
%>
<%@include file="/chbs/jspAssets/navHead.jsp" %>
<!-- Top Nav Bar Comes from navHead.jsp -->
<%
}
%>
<%!
public ArrayList getUserData()
{
ArrayList buffer = new ArrayList();
try{
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/chbs?" + "user=root&password=xxx");
Statement stmt=conn.createStatement();
ResultSet rs = stmt.executeQuery("select * from users");
while(rs.next())
{
buffer.add('"' + rs.getString("users.Employee_ID") + '"');
}
return buffer;
}
catch (Exception e) {
e.printStackTrace();
}
return buffer;
}
%>
<body>
<div id="wrapper">
<div class="container">
<!-- -->
<br>
<div align="center">
<label id="label" class="btn btn-warning btn-lg" style="font-weight: bold; text-decoration: underline; color: blue">
<strong>Edit/ Update Hall Details</strong></label>
<br>
<!--<label align="center" style="font-weight: bold; text-decoration: underline;"></label>-->
</div>
<br>
<form action="/chbs/adm/HallNamesValidation.jsp" method="post">
<div class="container" style="width: 90%;">
<table id="hallTable">
<thead>
<tr>
<th scope="col" style="width: 10px; display:none;">#</th>
<th scope="col" style="width: 20px;">Sl No</th>
<th scope="col" style="width: 60px;">Hall Name/Number</th>
<th scope="col" style="width: 50px;">Seating Capacity</th>
<th scope="col" style="width: 75px;">Hall Location</th>
<th scope="col" style="width: 60px;">Custodian ID</th>
<th scope="col" style="width: 75px;">Custodian Name</th>
<th scope="col" style="width: 60px;">Approver ID</th>
<th scope="col" style="width: 75px;">Approver Name</th>
<th scope="col" style="width: 10px; display:none ;">Amended</th>
</tr>
</thead>
<tbody name='tblBody' id='tblBody'>
<%
Class.forName("com.mysql.jdbc.Driver"); // MySQL database connection
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/chbs?" + "user=root&password=rama30");
Statement stmt = null;
stmt = conn.createStatement();
String query = "select * from halls";
ResultSet rs = null;
rs = stmt.executeQuery(query);
int x = 1;
while(rs.next()){
%>
<tr>
<%
int id = rs.getInt("Hall_ID");
String hallName = rs.getString("Hall_Name");
String hallCapacity = rs.getString("Capacity");
String hallLocation = rs.getString("hall_location");
String custodianID = rs.getString("hall_location");
String custodianName = rs.getString("hall_location");
String approverID = rs.getString("hall_location");
String approverName = rs.getString("hall_location");
%>
<td scope="col" style="width: 10px; display: none;">
<input type="number" id="table_id" name="table_id" class="form-control" value=<%=id %> ></td>
<td scope="col" style="width: 20px; font-weight: normal; text-align: center"><%=x %></td>
<td scope="col" style="width: 60px; font-weight: normal;" >
<input type="text" id="hall_name" name="hall_name" class="form-control" onkeyup="rowEdited($(this).parent())" value=<%=hallName %> ></td>
<td scope="col" style="width: 50px; font-weight: normal; text-align: center">
<input type="text" style="text-align: center" id="hall_capacity" name="hall_capacity" onkeyup="rowEdited($(this).parent())" class="form-control" value=<%=hallCapacity %>></td>
<td scope="col" style="width: 75px; font-weight: normal; text-align: center">
<input type="text" id="hall_location" name="hall_location" onkeyup="rowEdited($(this).parent())" class="form-control" value=<%=hallLocation%>></td>
<td scope="col" style="width: 75px; font-weight: normal; text-align: center">
<input type="text" id="hall_location" name="hall_location" onkeyup="rowEdited($(this).parent())" class="form-control" value=<%=custodianID%>></td>
<td scope="col" style="width: 75px; font-weight: normal; text-align: center">
<input type="text" id="hall_location" name="hall_location" onkeyup="rowEdited($(this).parent())" class="form-control" value=<%=custodianName%>></td>
<td scope="col" style="width: 75px; font-weight: normal; text-align: center">
<input type="text" id="hall_location" name="hall_location" onkeyup="rowEdited($(this).parent())" class="form-control" value=<%=approverID%>></td>
<td scope="col" style="width: 75px; font-weight: normal; text-align: center">
<input type="text" id="hall_location" name="hall_location" onkeyup="rowEdited($(this).parent())" class="form-control" value=<%=approverName%>></td>
<td scope="col" style="width: 10px; display: none ;"><input type='text' id='amended' name='amended' class='form-control'></td>
</tr>
<% x++;} %>
</tbody>
</table>
</div>
<div id="buttonSet">
<button name="btnSave" id="btnSave" class="btn btn-success">Save to Database<b></button>
</div>
</form>
<div class="btn-group pull-right" id="buttonSetAddRow">
<input class="your-input " type="number" style="width: 45px; height: 30px; font-weight: bold;" type="number"
name="num_rows" id="num_rows" value="1" onfocus="this.select()" min="1" max="10"
required=""/>
<button type="button" id="addtblRow" class="btn btn-primary btn-sm" ><b>Add Row<b></button>
</div>
<div class="container">
<div id="ajaxMsg" name="ajaxMsg" ></div>
</div>
<!-- -->
</div>
</div>
<script>
$(document).ready(function() {
function addNewRow(htmlTableRows) {
//window.alert(htmlTableRows);
var trd = "";
trd += "<tr>";
trd += "<td id='table_id' name='table_id' style='width: 10px; text-align: center; vertical-align:middle; display:none ;'></td>";
trd += "<td style='width: 20px; text-align: center; vertical-align:middle;'>" + htmlTableRows + "</td>";
trd += "<td style='width: 60px; text-align: center; vertical-align:middle;' ><input type='text' id='hall_name' name='hall_name' class='form-control' placeholder='Hall Name/Number' required></td>";
trd += "<td style='width: 50px; text-align: center; vertical-align:middle;' ><input type='text' style='text-align: center' id='hall_capacity' placeholder='Hall capacity' required name='hall_capacity' class='form-control'></td>";
trd += "<td style='width: 75px; text-align: center; vertical-align:middle;'><input type='text' id='hall_location' name='hall_location' placeholder='Hall location' required class='form-control'></td>";
//Custodian AutoComplete UI
var appendCustodianTxt = "<td name='cus'><input class='form-control custodianautocomplete' name='custodianID' type='text' placeholder='Custodian ID' required autocomplete='on'/></td>";
trd += appendCustodianTxt; //These two steps through var necessary elese Throwing error
trd += "<td><input disabled type='text' id='custodianName' name='custodianName' placeholder='Custodian Name' class='form-control'></td>";
//Approver AutoComplete UI
var appendApproverTxt = "<td name='app'><input class='form-control approverautocomplete' name='approverID' type='text' placeholder='Approver ID' required/></td>";
trd += appendApproverTxt; //These two steps through var necessary elese Throwing error
trd += "<td><input disabled type='text' id='approverName' name='approverName' placeholder='Approver Name' class='form-control'></td>";
trd += "<td scope='col' style='width: 10px; display:none;'><input type='text' id='amended' name='amended' class='form-control' value='newrow'></td>";
trd += "</tr>";
$("table tbody").append(trd);
//Custodian List
$("tr").find("cus").append(appendCustodianTxt);
$('.custodianautocomplete').autocomplete({
source: <%= getUserData() %>
}).focus(function() { $(this).find('input').select(); $(this).select(); });
}
}); //$(document).ready(function() Ends
</script>
<%@include file="../jspAssets/footer.jsp" %>