当HTML值改变时，jsp从MySQL检索数据

时间：2018-02-04 12:10:12

标签： mysql ajax jsp

我从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_Name发生更改时更新Employee_ID。我尝试了一切，但无法实现。 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"

我现在很绝望，因为我从三天起努力但仍然无法破解这一点。所以请告知。

1 个答案:

答案 0 :(得分：0)

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

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

请注意，

getEmpName.jsp

这有助于我查看(!resultSet.isBeforeFirst() ) {中的错误。然后在同一个文件中，我更改了if (rs.next()){到return buffer;并将out.println(buffer);替换为response.trim();，并且whitespaces是必要的，以便从响应中删除@Test public void getAccessTokenViaSpringSecurityOAuthClient() { try { OAuth2ProtectedResourceDetails resourceDetails = googleOAuth2Details(); OAuth2RestTemplate oAuthRestTemplate = new OAuth2RestTemplate(resourceDetails); org.springframework.http.HttpHeaders headers = new org.springframework.http.HttpHeaders(); headers.setContentType(MediaType.APPLICATION_JSON); OAuth2AccessToken token = oAuthRestTemplate.getAccessToken(); System.out.println(oAuthRestTemplate.getResource()); System.out.println(oAuthRestTemplate.getOAuth2ClientContext()); System.out.println(token); Assert.assertTrue(token != null); } catch (Exception e) { e.printStackTrace(); } } public OAuth2ProtectedResourceDetails googleOAuth2Details() { AuthorizationCodeResourceDetails googleOAuth2Details = new AuthorizationCodeResourceDetails(); googleOAuth2Details.setClientId("xxxxx"); googleOAuth2Details.setUserAuthorizationUri("https://xxx/yyy/oauth2/authorize"); googleOAuth2Details.setAccessTokenUri("https://xxx/yyy/oauth2/token"); googleOAuth2Details.setScope(Arrays.asList("openid")); googleOAuth2Details.setPreEstablishedRedirectUri("https://www.getpostman.com/oauth2/callback"); googleOAuth2Details.setAuthenticationScheme(AuthenticationScheme.query); googleOAuth2Details.setClientAuthenticationScheme(AuthenticationScheme.form); return googleOAuth2Details; } 。代码以我想要的方式运作。感谢StackOverflow.com，我找到了所有可能的方法来自行调试。我不介意代码改进，如果有的话。

相关问题
最新问题