自动完成

自动完成

关注
发信
关注(28)粉丝(399)

mysql - JSP与MySQL自动完成

我正在使用此js代码向html表添加新行，并添加ajax（）调用以使用Jquery UI自动完成功能

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，而是直接使用文本编辑器进行编码。请告知错误在哪里。

最佳答案

我已经删除了与代码无关的部分。但是我明白了...

<%@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" %>

关于mysql - JSP与MySQL自动完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48594950/

10-16 07:47
Powered by LMLPHP ©2024 自动完成 0.035611