初级Ajax学习——实现二级联动菜单
2013-05-20 09:37
816 查看
前台页面
<script type="text/javascript">
var xmlHttp ; // 声明全局的xmlHttpRequest对象
var provinceID = 0 ; //省份id
//创建xmlHttpRequest对象
function createXmlHttp(){
var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
if(window.ActiveXObject){
for(var i=0;i<activeKey.length;i++){
try{
xmlHttp = new ActiveXObject(activeKey[i]);
if(xmlHttp!=null){
return xmlHttp;
}
}catch(error){
continue;
}
}
throw new Error("客户端浏览器版本低，不支持XMLHttpRequest对象，请更新浏览器");
}else if(window.XMLHttpRequest){
xmlHttp = new window.XMLHttpRequest();
return xmlHttp;
}
}
//异步从后台获取省份函数
function getProvince(){
xmlHttp = createXmlHttp();
xmlHttp.onreadystatechange = readyStateHandler1;
xmlHttp.open("POST","provinceServlet",true); //provinceSerclet实现从数据库获取省份信息
xmlHttp.send(null);
}
function readyStateHandler1(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//改变省份下拉列表
var xmlDoc = xmlHttp.responseText; //获取从后台传回的字符串信息
createOption(xmlDoc,"province_select"); //创建省份下拉框
}
}
}
//创建下拉框
function createOption(msg,selectId){
var p_or_c = msg.split(";");
var select = document.getElementById(selectId);
for(var i= 0; i< p_or_c.length-1; i++ ){ //创建下拉框
var p_or_c_ = p_or_c[i].split(",");
var oOption = document.createElement("option");
select.appendChild(oOption);
oOption.text = p_or_c_[1];
oOption.value = p_or_c_[1];
oOption.id = p_or_c_[0] ;
}
}
//查询参数与地址拼接
function createQueryString(provinceID){
var queryString = "http://10.22.70.84:8080/test/ReadCityServlet?"+"provinceID="+provinceID;
return queryString;
}
//省份下拉框改变触发函数
function startRequest(slcprovinceID){
xmlHttp = createXmlHttp();
provinceID = slcprovinceID;
xmlHttp.onreadystatechange = readyStateHandler;
xmlHttp.open("POST",createQueryString(provinceID),true); //与后台交互语句
xmlHttp.send(null);
}
//清空城市下拉框的数据
function clearCityList(){
var select_c = document.getElementById("city_select");
for(var i=1;i<select_c.options.length;) //i=1，不清楚“option”选项
{
select_c.removeChild(select_c.options[i]); //select_c.option可获取select所有option
}
}
//异步读取数据
function readyStateHandler(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//改变城市下拉列表
var xmlDoc = xmlHttp.responseText;
clearCityList(); //清空城市下拉框
createOption(xmlDoc,"city_select"); //创建城市下拉框
}
}
}
window.onload = getProvince; //页面加载时同时加载省份
</script>
</head>
<body>
<div>
省
<select id="province_select" name="province_select" onchange="startRequest(this.options[this.options.selectedIndex].id)"> <!--红色语句获取当前select所选择option-->
<option value="" SELECTED>请选择</option>
</select>
市
<select id="city_select" name="city_select">
<option value="" SELECTED>请选择</option>
</select>
</div>
</body>
Servlet
public class ProvinceServlet extends HttpServlet{
//定义MYSQL的数据库驱动程序
public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";
//定义MYSQL数据库的连接地址
public static final String DBURL = "jdbc:mysql://localhost:3306/test";
//MYSQL数据库的连接用户名
public static final String DBUSER = "root" ;
//MYSQL数据库的连接密码
public static final String DBPASS = "123456" ;
public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException
{
Connection con = null; //数据库连接
Statement stmt = null; //数据库操作
ResultSet rs = null; //保存查询结果
String id = "" ; //定义省份id
String name = "" ; //定义省份名称
String sql = "select * from province" ; //查询语句
String msg = "" ;
try{
Class.forName(DBDRIVER); //加载驱动程序
//连接MYSQL时要写上连接的用户名和密码
con = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
stmt = (Statement) con.createStatement() ; //实例化Statement对象
rs = stmt.executeQuery(sql); // 实例化resultSet对象
a9b4
while(rs.next()){ //指针向下移动
id = rs.getString("provinceId");
name = rs.getString("provinceName");
msg = msg + id + "," + name +";" ;
}
rs.close(); // 关闭结果集
stmt.close(); //操作关闭
con.close(); //数据库关闭
}catch(Exception e){
e.printStackTrace();
}
resp.setCharacterEncoding("utf-8"); //解决返回参数中文乱码
PrintWriter out = resp.getWriter();
out.write(msg); //字符串参数返回
out.close();
}
public void doPost(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
this.doGet(req,resp);
}
}
Web.xml
<servlet>
<servlet-name>Province</servlet-name> //与 <servlet-mapping>中的<servlet-name>必须保持一致
<servlet-class>servlet.ProvinceServlet</servlet-class> //该servlet所在包的路径
</servlet>
<servlet-mapping>
<servlet-name>Province</servlet-name>
<url-pattern>/provinceServlet</url-pattern> //前台访问路径
</servlet-mapping>
<servlet>
实现效果
<script type="text/javascript">
var xmlHttp ; // 声明全局的xmlHttpRequest对象
var provinceID = 0 ; //省份id
//创建xmlHttpRequest对象
function createXmlHttp(){
var activeKey = new Array("MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");
if(window.ActiveXObject){
for(var i=0;i<activeKey.length;i++){
try{
xmlHttp = new ActiveXObject(activeKey[i]);
if(xmlHttp!=null){
return xmlHttp;
}
}catch(error){
continue;
}
}
throw new Error("客户端浏览器版本低，不支持XMLHttpRequest对象，请更新浏览器");
}else if(window.XMLHttpRequest){
xmlHttp = new window.XMLHttpRequest();
return xmlHttp;
}
}
//异步从后台获取省份函数
function getProvince(){
xmlHttp = createXmlHttp();
xmlHttp.onreadystatechange = readyStateHandler1;
xmlHttp.open("POST","provinceServlet",true); //provinceSerclet实现从数据库获取省份信息
xmlHttp.send(null);
}
function readyStateHandler1(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//改变省份下拉列表
var xmlDoc = xmlHttp.responseText; //获取从后台传回的字符串信息
createOption(xmlDoc,"province_select"); //创建省份下拉框
}
}
}
//创建下拉框
function createOption(msg,selectId){
var p_or_c = msg.split(";");
var select = document.getElementById(selectId);
for(var i= 0; i< p_or_c.length-1; i++ ){ //创建下拉框
var p_or_c_ = p_or_c[i].split(",");
var oOption = document.createElement("option");
select.appendChild(oOption);
oOption.text = p_or_c_[1];
oOption.value = p_or_c_[1];
oOption.id = p_or_c_[0] ;
}
}
//查询参数与地址拼接
function createQueryString(provinceID){
var queryString = "http://10.22.70.84:8080/test/ReadCityServlet?"+"provinceID="+provinceID;
return queryString;
}
//省份下拉框改变触发函数
function startRequest(slcprovinceID){
xmlHttp = createXmlHttp();
provinceID = slcprovinceID;
xmlHttp.onreadystatechange = readyStateHandler;
xmlHttp.open("POST",createQueryString(provinceID),true); //与后台交互语句
xmlHttp.send(null);
}
//清空城市下拉框的数据
function clearCityList(){
var select_c = document.getElementById("city_select");
for(var i=1;i<select_c.options.length;) //i=1，不清楚“option”选项
{
select_c.removeChild(select_c.options[i]); //select_c.option可获取select所有option
}
}
//异步读取数据
function readyStateHandler(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//改变城市下拉列表
var xmlDoc = xmlHttp.responseText;
clearCityList(); //清空城市下拉框
createOption(xmlDoc,"city_select"); //创建城市下拉框
}
}
}
window.onload = getProvince; //页面加载时同时加载省份
</script>
</head>
<body>
<div>
省
<select id="province_select" name="province_select" onchange="startRequest(this.options[this.options.selectedIndex].id)"> <!--红色语句获取当前select所选择option-->
<option value="" SELECTED>请选择</option>
</select>
市
<select id="city_select" name="city_select">
<option value="" SELECTED>请选择</option>
</select>
</div>
</body>
Servlet
public class ProvinceServlet extends HttpServlet{
//定义MYSQL的数据库驱动程序
public static final String DBDRIVER = "org.gjt.mm.mysql.Driver";
//定义MYSQL数据库的连接地址
public static final String DBURL = "jdbc:mysql://localhost:3306/test";
//MYSQL数据库的连接用户名
public static final String DBUSER = "root" ;
//MYSQL数据库的连接密码
public static final String DBPASS = "123456" ;
public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException
{
Connection con = null; //数据库连接
Statement stmt = null; //数据库操作
ResultSet rs = null; //保存查询结果
String id = "" ; //定义省份id
String name = "" ; //定义省份名称
String sql = "select * from province" ; //查询语句
String msg = "" ;
try{
Class.forName(DBDRIVER); //加载驱动程序
//连接MYSQL时要写上连接的用户名和密码
con = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
stmt = (Statement) con.createStatement() ; //实例化Statement对象
rs = stmt.executeQuery(sql); // 实例化resultSet对象
a9b4
while(rs.next()){ //指针向下移动
id = rs.getString("provinceId");
name = rs.getString("provinceName");
msg = msg + id + "," + name +";" ;
}
rs.close(); // 关闭结果集
stmt.close(); //操作关闭
con.close(); //数据库关闭
}catch(Exception e){
e.printStackTrace();
}
resp.setCharacterEncoding("utf-8"); //解决返回参数中文乱码
PrintWriter out = resp.getWriter();
out.write(msg); //字符串参数返回
out.close();
}
public void doPost(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
this.doGet(req,resp);
}
}
Web.xml
<servlet>
<servlet-name>Province</servlet-name> //与 <servlet-mapping>中的<servlet-name>必须保持一致
<servlet-class>servlet.ProvinceServlet</servlet-class> //该servlet所在包的路径
</servlet>
<servlet-mapping>
<servlet-name>Province</servlet-name>
<url-pattern>/provinceServlet</url-pattern> //前台访问路径
</servlet-mapping>
<servlet>
实现效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- JavaScript 学习--二级联动菜单实现
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- Ajax实现二级联动菜单
- Ajax实现二级联动菜单
- Ajax技术POST交互实现二级联动菜单
- Ajax二级联动菜单实现原理及代码
- Ajax二级联动菜单实现原理及代码
- Ajax实现二级联动菜单
- Ajax实现二级联动菜单
- Laravel5.2二级菜单Ajax联动实现
- 用ajax技术读取数据库内容实现二级联动下拉选择菜单
- JavaScript之AJAX实现二级联动菜单(jsp+js+servlet+xml)
- Ajax实现二级联动菜单
- Ajax实现二级联动菜单
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- Ajax实现二级联动菜单