mysql - 当 HTML 值更改时，jsp 从 MySQL 检索数据

Question

我已从 MySQL 检索记录并将其显示在 HTML 表中。 HTML 代码如下所示

<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">
    <tr>
      <td scope="col" style="width: 10px; display: none;">
        <input type="number" id="table_id" name="table_id" class="form-control" value="5">
      </td>
      <td scope="col" style="width: 20px; font-weight: normal; text-align: center">1</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="PPEG-VC">
      </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="50">
      </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="main" building="">
      </td>
      <td scope="col" style="width: 75px; font-weight: normal; text-align: center">
        <input type="text" id="custodianName" name="custodianName" placeholder="Custodian Name" class="form-control custodianautocomplete ui-autocomplete-input" value="ISRO003" autocomplete="off">
      </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="main" building="">
      </td>
      <td scope="col" style="width: 75px; font-weight: normal; text-align: center">
        <input type="text" id="custodianName" name="custodianName" placeholder="Custodian Name" class="form-control approverautocomplete ui-autocomplete-input" value="ISRO005" autocomplete="off">
      </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="main" building="">
      </td>
      <td scope="col" style="width: 10px; display: none ;">
        <input type="text" id="amended" name="amended" class="form-control">
      </td>
      <script>
        attachCustodianAutocomplete();
        attachApproverAutocomplete();

      </script>
    </tr>
    <tr>
      <td scope="col" style="width: 10px; display: none;">
        <input type="number" id="table_id" name="table_id" class="form-control" value="4">
      </td>
      <td scope="col" style="width: 20px; font-weight: normal; text-align: center">2</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="MISD-NVC">
      </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="35">
      </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="MISD">
      </td>
      <td scope="col" style="width: 75px; font-weight: normal; text-align: center">
        <input type="text" id="custodianName" name="custodianName" placeholder="Custodian Name" class="form-control custodianautocomplete ui-autocomplete-input" value="ISRO004" autocomplete="off">
      </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="MISD">
      </td>
      <td scope="col" style="width: 75px; font-weight: normal; text-align: center">
        <input type="text" id="custodianName" name="custodianName" placeholder="Custodian Name" class="form-control approverautocomplete ui-autocomplete-input" value="ISRO006" autocomplete="off">
      </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="MISD">
      </td>
      <td scope="col" style="width: 10px; display: none ;">
        <input type="text" id="amended" name="amended" class="form-control">
      </td>
      <script>
        attachCustodianAutocomplete();
        attachApproverAutocomplete();
      </script>
    </tr>
  </tbody>
</table>

现在，只要 Employee_ID 发生变化，我就想更新 Employee_Name。我尝试了一切，但无法实现。 onChange js代码是这样的

    $(".custodianautocomplete").change(function() {
        var IDSelected = $(this).val();
 $(this).parent("td").next().find("input[name=hall_location]").val(<%=getEmpName("<script>document.writeln(IDSelected)</script>")%>);
    });

我什至尝试过ajax，但这也会引发 500 错误。请帮忙给我一个解决方案。

由于没有响应，我正在添加我尝试过的其他代码。修改后的ajax代码是这样的

$(".custodianautocomplete").change(function() {
    var IDSelected = $(this).val();
    var yql_url = 'getEmpName.jsp';
    var url = 'getEmpName.jsp';
    $.ajax({
        'url': yql_url, 
        'data': {IDSelected: IDSelected},   
        'success': function(response) { 
            console.log(response);  
            $(this).parent("td").next().find("input[name=hall_location]").val(response);    
        },  
    });
});

getEmpName.jsp 的代码如下

<%@page import="java.text.SimpleDateFormat"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="com.mysql.*" %>
<%@page import="java.sql.*" %>
<%@page import="java.util.*"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.io.*"%>
<%@page import="javax.servlet.*" %>
<%@page import="javax.servlet.http.*" %>

 <% 
    String buffer = "";
    String emp_id = request.getParameter("IDSelected");
          try{
            Class.forName("com.mysql.jdbc.Driver");                     
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/chbs?" + "user=root&password=xxx");                              
            PreparedStatement pst = conn.prepareStatement("SELECT Employee_Name FROM users WHERE Employee_ID = ?;");
            pst.setString(1,  emp_id);
            ResultSet rs = pst.executeQuery();        
            if (!resultSet.isBeforeFirst() ) {    
                buffer = "false"; 
            } else {
                buffer = rs.getString("users.Employee_Name");
            }
            pst.close();
            conn.close();   
        }
         catch (Exception e) {
            e.printStackTrace();
         }
    return buffer;
}
%>

我尝试过的另一种ajax是这样的

$.get( "getEmpName.jsp", {
            userId: IDSelected
        }, function( resp ) {
            console.log( resp ); // server response
            $(this).parent("td").next().find("input[name=hall_location]").val( resp ); // server response
        });

但是错误仍然存​​在

jquery-3.2.1.min.js:3049 GET http://localhost:8090/chbs/adm/getEmpName.jsp?userId=ISRO009 500 (Internal Server Error)
send @ jquery-3.2.1.min.js:3049
ajax @ jquery-3.2.1.min.js:2944
r.(anonymous function) @ jquery-3.2.1.min.js:2965
(anonymous) @ updateHallNames.jsp:250
dispatch @ jquery-3.2.1.min.js:1627
q.handle @ jquery-3.2.1.min.js:1589
jquery-3.2.1.min.js:3049 XHR failed loading: GET "http://localhost:8080/chbs/adm/getEmpName.jsp?userId=ISRO009"

我现在很绝望，因为我已经努力三天了，但仍然无法破解这个。所以请大家多多指教。

Answer 1

成功的幸福是美妙的。我做了这样的代码更改

$(".custodianautocomplete").change(function() {
        var IDSelected = $(this).val();
        var recovered = "Rakesh";
        // $(this).parent("td").next().find("input[name=hall_location]").val("Rakesh") ;
        //window.alert($(this).parent("td").next().find("input[name=hall_location]").val());

        $.ajax({
             url: 'getEmpName.jsp',
             type : 'GET',
             data : {IDSelected: IDSelected},
             async: false,
             success : function(response) {
                recovered = response.trim();
                },
            fail:function (jqXHR, exception) {
                console.log(jqXHR);
                },
        });
        $(this).parent("td").next().find("input[name=hall_location]").val(recovered);
      });

请注意，

fail:function (jqXHR, exception) {
                    console.log(jqXHR);
                    },

这帮助我查看了 getEmpName.jsp 中的错误。然后在同一个文件中，我将 if (!resultSet.isBeforeFirst() ) { 更改为 if (rs.next()){ 并替换 return buffer; 到 out.println(buffer); 和 response.trim(); 是从响应中删除空格所必需的。代码按照我想要的方式工作。感谢 StackOverflow.com，我在这里找到了所有可能的调试方法。如果有的话，我不介意代码改进。