带有 AJAX 和数据库的动态下拉列表

Posted 2023-02-26

【中文标题】带有 AJAX 和数据库的动态下拉列表

【英文标题】：Dynamic drop down list with AJAX and database

【发布时间】：2012-11-12 23:50:31

【问题描述】：

我希望有人能引导我朝着正确的方向前进。我要做的是创建两个下拉列表，其中第二个（城市）取决于第一个（州）。例如，当我单击华盛顿时，我希望第二个下拉菜单列出西雅图和沃拉沃拉；乔治亚州、亚特兰大、雅典等。最终我的目标是将几个列表链接在一起（国家 -> 州 -> 县 -> 城市），但如果我能让这两个工作正常，我想我可以弄清楚如何做到这一点。

到目前为止，我已经设置了两个数据库。表 CITY 以 cityid (primary) 和 cityname 作为列，表 STATE 以 stateid (primary) 和 statename 作为列。

代码如下

dropDown.jsp：

<script>
function createRequestObject()
    var req;
    if(window.XMLHttpRequest)
        //For Firefox, Safari, Opera
        req = new XMLHttpRequest();
     else if(window.ActiveXObject)
        //For IE 5+
        req = new ActiveXObject("Microsoft.XMLHTTP");
     else 
        //Error for an old browser
        alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
    
    return req;


//Make the XMLHttpRequest Object
var http = createRequestObject();
function sendRequest(method, url)
    if(method == 'get' || method == 'GET')
        http.open(method,url);
        http.onreadystatechange = handleResponse;
        http.send(null);
    
//end function send

function handleResponse()
    if(http.readyState == 4 && http.status == 200)
        var response = http.responseText;
        if(response)
            document.getElementById("second_dropdown_code").innerhtml = response;
        
    


function getCityDropdown() 
    var w = document.myform.mylist.selectedIndex;
    var country_id = document.myform.mylist.options[w].value;
    sendRequest('GET','getCites.do?stateid=' + state_id);


</script>

<FORM NAME="myform">
<SELECT NAME="state" onChange="getCityDropdown()">
    <OPTION VALUE="1">Georgia</option>
    <OPTION VALUE="2">Washington</option>
</SELECT>
</FORM>
<div id="second_dropdown_code"></div>

getCities.java

protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException 
    PrintWriter out = response.getWriter();
    try 
        processRequest(request, response);

        String sql = "select * from CITY";
        Connection connection = datasource.getConnection();
        PreparedStatement preparedStatement = connection.prepareStatement(sql);
        ResultSet resultSet = preparedStatement.executeQuery();

        while (resultSet.next() ) 
            //out.println(resultSet.getInt("cityid") + "<br/>" + resultSet.getString("city") + "<br/>" + resultSet.getString("INSTRUCTOR") + "<br/>" + resultSet.getString("BUILDING") + "<br/>" + resultSet.getString("ROOM") + "<br/>");
            //out.println(resultSet.getInt("cityid") + "<br/>" + resultSet.getString("city") + "<br/>" );
            //out.println("<select name=\"city\"><option value=\"1\">Atlanta</option><option value=\"2\">Walla Walla</option></select> ");
        

        resultSet.close();
        preparedStatement.close();
        connection.close();

     catch (SQLException ex) 
        Logger.getLogger(getCities.class.getName()).log(Level.SEVERE, null, ex);
    

我知道我需要在 while 循环中使用某种 if 语句，但我不确定从哪里获取参数以将 stateid 与 cityid 进行比较。

如有任何指导，谢谢。

【问题讨论】：

您是在问如何从 jsp 页面获取参数并在 servlet sql 查询中使用该值？

【参考方案1】：

设计中存在一个基本问题：以您当前的数据库设计，无法知道哪些城市属于哪个州。

表格应如下所示：

State
    - id
    - name

City
    - id
    - name
    - state_id (foreign key to State.id)

因此，用于获取给定州 ID 的城市的 SQL 查询将如下所示：

select city.id, city.name from city
where city.state_id = ?
order by city.name