我正在创建一个页面，其中下拉列表中选项的选择使用对servlet的Ajax调用从数据库中获取另一个下拉列表的数据。
这是我的代码。
<%@page import="Access.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Access</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<style type="text/css">
#header-wrap {
position: fixed;
height: 92px;
top:0;
width: 100%;
z-index: 100;
background-color: #000099;
}
.bs-example{
margin: 20px;
}
.form-group input
{
width:150px;
}
.details
{
margin-top: 100px;
padding: 20px 0px 10px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 0.875em;
}
#name {
top: 30px;
left: 30%;
color: #FFFFFF;
position: absolute;
font-weight: lighter;
font-size: x-large;
text-shadow: 0 0 0.3em rgb(0, 0, 0);
}
</style>
</head>
<body>
<jsp:include page="/SearchController" />
<%
String user = (String) session.getAttribute("user");
ArrayList<String> locations=(ArrayList<String>)session.getAttribute("locations");
%>
<br/>
<ul class="nav nav-tabs" id="nav-form">
<li class="active"><a href="#give-remote" data-toggle="tab">Give Access<i class="fa"></i></a></li>
<li id="fromDB"><a href="#sbt-jobs" data-toggle="tab">Submitted Jobs <i class="fa"></i></a></li>
</ul>
<!-- Form Name -->
<div class="tab-content">
<div class="tab-pane active" id="give-remote">
<br/>
<form id="remoteForm" class="form-horizontal" action="RemoteAccess" method="post">
<c:if test="${not empty Message}">
<font color="red"><c:out value="${Message}"/></font>
</c:if>
<div class="form-group">
<label class="col-xs-3 control-label">Location Name</label>
<div class="col-xs-2">
<select class="form-control" id="location" name="location">
<option>Select location</option>
<c:forEach items="${locations}" var="locations" >
<option value="${locations}"> ${locations} </option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gateway Server IP</label>
<div class="col-xs-2">
<select class="form-control" id="svrAddr" name="svrAddr">
<option selected="selected">Select Server</option>
</select>
<!-- <input type="text" class="form-control" name="svrAddr" id="svrAddr"/>-->
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Client Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="clntAddr" />
</div>
</div>
<div class="form-group" style="margin-top: 15px;">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" id="submitjob" class="btn btn-default" >Submit Job</button>
</div>
</div>
</form>
</div>
<div class="tab-pane" id="sbt-jobs">
<jsp:include page="SbmtJobs.jsp" />
</form>
</div>
</div>
<script>
$(function() {
$.validator.addMethod('IP4Checker', function(value) {
var ip="^([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\." +
"([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\." +
"([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\." +
"([01]?\\d\\d?|2[0-4]\\d|25[0-5])$";
return value.match(ip);
}, 'Invalid IP address');
$.validator.addMethod('IP4SvrChecker', function(value) {
var ip="^10\.([0-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-5]))\.([0-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-5]))\.([0-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-5]))$";
return value.match(ip);
}, 'Invalid server IP address'
);
$('#remoteForm').validate({
focusInvalid: false,
rules: {
clntAddr: {
required: true,
IP4Checker: true
},
svrAddr: {
required: true,
IP4SvrChecker:true
},
time: {
required: true
}
}
});
$('#location').change(function(event) {
var $location=$("select#location").val();
$.get('SvrController',{location:$location},function(responseJson) {
var $select = $('#svrAddr');
$select.find('option').remove();
$.each(responseJson, function(index, name) {
$('<option>').val(index).text(name).appendTo($select);
});
},'json');
});
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
window.location.hash = this.hash;
});
});
</script>
</body>
</html>
`
public class SearchController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SearchController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("application/json");
HttpSession session=request.getSession();
try {
ArrayList<String> locations = getLocation();
session.setAttribute("locations", locations);
} catch (Exception e) {
System.err.println(e.getMessage());
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
protected ArrayList<String> getLocation()
{
ArrayList<String> list = new ArrayList<String>();
PreparedStatement ps = null;
Connection con=null;
String data;
try {
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/remote","root","root");
ps = con.prepareStatement("SELECT concat(locnid,'/',locname,'/',locntype) FROM locations order by locnid asc");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
data = rs.getString(1);
list.add(data);
}
con.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
return list;
}
}
`
public class SvrController extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SvrController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("application/json");
try {
String locnid = request.getParameter("location");
System.out.println(locnid);
ArrayList<String> list=null;
PreparedStatement ps = null;
Connection con=null;
String data;
String locn[]=locnid.split("/");
try {
Class.forName("com.mysql.jdbc.Driver");
con=DriverManager.getConnection("jdbc:mysql://localhost:3306/remote","root","root");
ps = con.prepareStatement("SELECT address1,address2,altflag FROM locations WHERE locnid= ? and locntype=?");
ps.setString(1, locn[0]);
ps.setString(2, locn[2]);
ResultSet rs = ps.executeQuery();
while (rs.next()) {
if("Y".equalsIgnoreCase(rs.getString(3)))
list.add(rs.getString(2));
else list.add(rs.getString(1));
}
con.close();
} catch (Exception e) {
System.out.println(e.getMessage());
}
String searchList = new Gson().toJson(list);
response.getWriter().write(searchList);
//response.getWriter().write(jo.toString());
} catch (Exception e) {
System.err.println(e.getMessage());
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
然而，即使SvrController收到位置ID，第二个下拉列表也不会被填充。而是接收服务器地址下拉列表为空并且不填充。请指出是否有任何错误