当HTML值更改时，jsp从MySQL检索数据 [英] jsp retrieve data from MySQL when HTML value changes
本文介绍了当HTML值更改时，jsp从MySQL检索数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已从MySQL检索记录并将其显示在HTML表中. HTML代码如下:
I have retrieved records from MySQL and displayed them in HTML Table. The HTML Code looks like this
<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代码就是这样
Now, I want to update Employee_Name whenever there is a change in Employee_ID. I tried everything but am not able to achieve it. The onChange js code is like this
$(".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错误.请帮我解决.
I have even tried ajax but that is also throwing 500 error. Please help in giving me a solution.
由于没有响应，因此我添加了尝试的其他代码. 修改后的ajax代码是这样的
Since there is no response, I am adding additional codes which I attempted. The modified ajax code is like this
$(".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就是这样
Another type of ajax I tried is like this
$.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"
我现在很绝望，因为三天以来我一直在努力，但仍然无法破解.所以请提出建议.
I am desperate now because I am trying hard since three days but still not able to hack this. So please advise.
推荐答案
成功的幸福令人难以置信. 我做了这样的代码更改
The Happiness of Success is fabulous. I made code changes like this
$(".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中的错误.然后在同一文件中，如果将(!resultSet.isBeforeFirst() ) {更改为if (rs.next()){并将return buffer;替换为out.println(buffer);和response.trim();以便从响应中删除whitespaces，则我进行了更改.代码以我想要的方式工作.多亏了StackOverflow.com，我在这里找到了所有可能的调试方法.我不介意代码改进(如果有的话).
This helped me look at errors in getEmpName.jsp. Then in Same file i changed if (!resultSet.isBeforeFirst() ) { to if (rs.next()){ and replaced return buffer; to out.println(buffer); and response.trim(); is necessary to remove whitespaces from response. And the Code Works The way I Want. Thanks to StackOverflow.com I found all possible ways to debug here itself. I won't mind code improvements if any.
这篇关于当HTML值更改时，jsp从MySQL检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
