Jquery 基于使用servlet和Ajax选择的另一个下拉列表填充下拉列表
我正在制作一个页面，其中在下拉列表中选择一个选项，使用对servlet的Ajax调用从数据库中获取另一个下拉列表的数据 这是我的密码Jquery 基于使用servlet和Ajax选择的另一个下拉列表填充下拉列表,jquery,ajax,jsp,servlets,Jquery,Ajax,Jsp,Servlets,我正在制作一个页面，其中在下拉列表中选择一个选项，使用对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 htt
<%@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>
通道
#收割台包装{
位置：固定；
高度：92px；
排名：0；
宽度：100%；
z指数：100；
背景色：#000099；
}
.bs示例{
利润率：20px；
}
.表格组输入
{
宽度：150px；
}
.详情
{
边缘顶部：100px；
填充：20px 0px 10px 0px；
背景色：#f7f7f7；
-moz盒阴影：0px 2px 2px rgba（0,0,0,0.3）；
-webkit盒阴影：0px 2px 2px rgba（0,0,0,0.3）；
盒影：0px2px2pRGBA（0,0,0,0.3）；
}
h1{
字号：0.875em；
}
#名字{
顶部：30px；
左：30%；
颜色：#FFFFFF；
位置：绝对位置；
字体重量：较轻；
字号：x大号；
文本阴影：0.3em rgb（0,0,0）；
}
地点名称
选择位置
${locations}
网关服务器IP
选择服务器
客户地址
提交作业
$（函数（）{
$.validator.addMethod（'IP4Checker'，函数（值）{
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]）$”；
返回值。匹配（ip）；
}，“无效IP地址”）；
$.validator.addMethod（'IP4SvrChecker'，函数（值）{
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][0-9]| 1（[0-9][0-9]）2（[0-4][0-9][0-9]| 5[0-5]））\（[0-9]|[1-9][0-9][0-5]）；
返回值。匹配（ip）；
}，“无效的服务器IP地址”
);
$（'#remoteForm'）。验证({
焦点无效：错误，
规则：{
clntAddr：{
要求：正确，
IP4Checker：对
},
svrAddr：{
要求：正确，
IP4SvrChecker：正确
},
时间：{
必填项：true
}
}
});
$（“#位置”）.change（函数（事件）{
var$location=$（“选择位置”）.val（）；
$.get（'SvrController'，{location:$location}，函数（responseJson）{
变量$select=$（'svrAddr'）；
$select.find（'option'）.remove（）；
$.each（responseJson，函数（索引，名称）{
$（''）.val（索引）.text（名称）.appendTo（$select）；
});
}“json”）；
});
var hash=window.location.hash；
hash&&$（'ul.nav a[href=“”+hash+'“]”）选项卡（'show'）；
$（'.nav选项卡a'）。单击（功能（e）{
$（this.tab（'show'）；
window.location.hash=this.hash；
});
});
公共类SearchController扩展了HttpServlet{
私有静态最终长serialVersionUID=1L；
/**
*@参见HttpServlet#HttpServlet（）
*/
公共搜索控制器（）{
超级（）；
//TODO自动生成的构造函数存根
}
/**
*@参见HttpServlet#doGet（HttpServletRequest请求，HttpServletResponse响应）
*/
受保护的void doGet（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException{
//TODO自动生成的方法存根
setContentType（“应用程序/json”）；
HttpSession session=request.getSession（）；
试一试{
ArrayList locations=getLocation（）；
session.setAttribute（“位置”，位置）；
}捕获（例外e）{
System.err.println（e.getMessage（））；
}
}
/**
*@请参阅HttpServlet#doPost（HttpServletRequest请求，HttpServletResponse响应）
*/
受保护的void doPost（HttpServletRequest请求、HttpServletResponse响应）引发ServletException、IOException{
//TODO自动生成的方法存根
doGet（请求、响应）；
}
受保护的ArrayList getLocation（）
{
ArrayList=新建ArrayList（）；
PreparedStatement ps=null；
连接con=null；
字符串数据；
试一试{
Class.forName（“com.mysql.jdbc.Driver”）；
con=DriverManager.getConnection（“jdbc:mysql://localhost:3306/remote“，”根“，”根“）；
ps=con.prepareStatement（“从locnid asc订购的位置中选择concat（locnid，“/”，locname，“/”，locntype”）；
结果集rs=ps.executeQuery（）；
while（rs.next（））{
数据=rs.getString（1）；
列表。添加（数据）；
}
con.close（）；
}捕获（例外e）{
System.out.println（e.getMessage（））；
}
退货清单；
}
}
public类SvrController扩展了HttpServlet{
私有静态最终长serialVersionUID=1L；
/**
*@参见HttpServlet#HttpServlet（）
*/
公共SvrController（）{
超级（）；
//TODO自动生成的构造函数存根
}
/**
*@参见HttpServlet#doGet（HttpServletRequest请求，HttpServletResponse响应）
*/
受保护的void doGet（HttpServletRequest请求，HttpServletResponse响应）抛出ServletException，IOException{
//TODO自动生成的方法存根
响应
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);
}
}