ajax 实现select关联(修改)

本文介绍了一个使用Oracle数据库实现国家与城市级联查询的例子,通过JSP页面结合JavaScript实现了动态加载城市列表的功能。首先从数据库中获取所有国家名称,当用户选择一个国家后,通过Ajax请求获取该国家对应的所有城市。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

具体是使用oracle中的表coutry,当选中国家后会自动过滤这个国家对应的城市:

menu.jsp页面内容:

<%@page language="java" import="java.util.*,java.sql.*" contentType = "text/html;charset=gb2312"%>
<jsp:directive.page import="com.co.DBConnect"/>

<jsp:useBean id="db" scope="page" class="com.co.DBConnect"/>
<html>
<head>
<!--LINK href="images/css.css" type=text/css rel=stylesheet-->
</head>
<%List cit = new ArrayList();%>
<%
    //String driver = "jdbc.oracle.driver.OracleDriver";
 
    Connection conn = null;
    Statement st = null;
    ResultSet rs1 = null;
    ResultSet rs2 = null;
   
    System.out.println("bb");
 String sql = "SELECT distinct cout_name FROM coutry";//distinct cout_name
    System.out.println("aaa");
    rs1 = db.getConnection(sql);
  
        while (rs1.next())
        {
            cit.add(rs1.getString(1));
        }
        try{
        rs1.close();
        st.close();
        conn.close();
        }  catch (Exception e)  {  
        e.printStackTrace();
    }
    sql = "SELECT distinct cout_city FROM coutry";//distinct cout_name
    System.out.println("aaa");
    rs2 = db.getConnection(sql);
  
 

%>
<body>
<script language="javascript">
var XMLHttpReq;
    var currentSort;
     //创建XMLHttpRequest对象      
    function createXMLHttpRequest() {
        if(window.XMLHttpRequest) { //Mozilla 浏览器
            XMLHttpReq = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) { // IE浏览器
            try {
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
    }
    //发送请求函数
    function sendRequest(url) {
        createXMLHttpRequest();
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
        XMLHttpReq.send(null);  // 发送请求
    }
    // 处理返回信息函数
    function processResponse() {
        if (XMLHttpReq.readyState == 4) { // 判断对象状态
            if (true) { // 信息已经成功返回,开始处理信息XMLHttpReq.status == 200
                updateMenu();
            } else { //页面不正常
                  alert("您所请求的页面有异常。");
            }
        }
    }
    //更新菜单函数
    function updateMenu() {
        var res=XMLHttpReq.responseXML.getElementsByTagName("res") ;
        alert("res===="+res[0].firstChild.nodeValue);
        /**下面是用innerHTML输出控件内容的一般用法**/
        //var subMenu = "";
        //for(var i = 0; i < res.length; i++) {
        //    subMenu = subMenu + "  " + res[i].firstChild.data + "";
        //}
        //currentSort.innerHTML = subMenu;
       
        var list = document.all.list;
        list.options.length=0;
        list.add(new Option("---请选择---",""));
        for(var i=0;i<res.length;i++){
            list.add(new Option(res[i].firstChild.nodeValue,res[i].firstChild.nodeValue));
        }
    }
    // 创建级联菜单函数
    function showSubMenu(obj) {
        //currentSort =document.getElementById(obj);
        //currentSort.parentNode.style.display = "";
        sendRequest("menujsp.jsp?sort=" + obj);
        /**下面这一句的作用是:每次选择后回到第一个选项**/
        //document.all.mli.options[0].selected=true;
    }

</script>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="mli"  style="width:150px">
<option value=''>---bbb---</option>
<%
    for(int i=0;i<cit.size();i++)
    {
        out.println("<option value='"+cit.get(i)+"'>"+cit.get(i)+"</option>");
    }
%>
</select>
<select name="list" onchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---aaa---</option>
<%
    while(rs2.next())
    {
        out.println("<option value='"+rs2.getString("cout_city")+"'>"+rs2.getString("cout_city")+"</option>");
    }
%>
</select>
</body>
</html>

 

menujsp.jsp页面内容:

<%@ page contentType="text/html; charset=gb2312" import="java.util.*,java.sql.*" %>
<jsp:useBean id="db" scope="page" class="com.co.DBConnect" />
<%
    String sort=request.getParameter("sort");
   
    ResultSet rs = null;
    List cities = new ArrayList();

    response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control","no-cache");
   

    try {
        String sql = "SELECT cout_city FROM coutry where cout_name='"+sort+"'";
        System.out.println("SQL="+sql);
        rs=db.getConnection1(sql);
        while (rs.next())
        {
            cities.add(rs.getString(1));
        }
        rs.close();
    }  catch (Exception e)  {  
        e.printStackTrace();
    }
    out.println("<response>");
    for(int i=0;i<cities.size();i++)
    {
        out.println("<res>" + cities.get(i).toString() + "</res>");
        System.out.println("ss");
    }
    out.println("</response>");
%>

 

jsp使用的bean,访问数据库的java程序
package com.co;
import java.sql.*;

public class DBConnect {
 //一个静态方法,返回一个数据库连接,这样达到了对数据库连接统一控制的目的。
 
 public ResultSet getConnection(String sql)throws Exception{
  String url = "jdbc:oracle:thin:@localhost:1521:oradb";//数据库url
  String db_name = "wang";//数据库用户名
  String db_password  = "wangch";//数据库密码
  Connection conn = null;
  try {
   Class.forName("oracle.jdbc.driver.OracleDriver");
  } catch (ClassNotFoundException e) {
   e.printStackTrace();
  }
  try {
   conn = DriverManager.getConnection(url,db_name,db_password);
  } catch (SQLException e) {
   e.printStackTrace();
  }
  Statement stat = conn.createStatement();
  return stat.executeQuery(sql);
 }
 public ResultSet getConnection1(String sql)throws Exception{
  String url = "jdbc:oracle:thin:@localhost:1521:oradb";
  String db_name = "wang";
  String db_password  = "wangch";
  Connection conn = null;
  try {
   Class.forName("oracle.jdbc.driver.OracleDriver");
  } catch (ClassNotFoundException e) {
   e.printStackTrace();
  }
  try {
   conn = DriverManager.getConnection(url,db_name,db_password);
  } catch (SQLException e) {
   e.printStackTrace();
  }
  Statement stat = conn.createStatement();
  return stat.executeQuery(sql);
 }
 }

 

数据库表创建sql:

create table coutry(cout_name varchar2[20] not null,cout_city varchar2[20] not null)

insert into coutry values('china','shanghai')

insert into coutry values('china','beijing')

insert into coutry values('american','ne')

insert into coutry values('american','hh')

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值