jsp+ajax+serverlet实现省市二级联动

浏览数：12 / 时间：2015年06月09日

jsp界面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    
    
<!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=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function loadProvince() {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            var data = req.responseText;
            
            var myObj = eval("(" + data + ")");
            
            //eval函数：格式化函数--将字符串转化为javascript对象的函数
            for (var i = 0; i < myObj.length; i++) {
                var oneProvince = myObj[i];
                var opKey = oneProvince.split("-")[0];
                var opValue = oneProvince.split("-")[1];
                
                //找到province对应的下拉框
                var proSelectObj = document.getElementById("proId");
                
                 var newOption = document.createElement("OPTION");
                 newOption.value = opKey;
                 newOption.innerHTML = opValue;
                
                 proSelectObj.appendChild(newOption);
            }
            
            //执行一次加载城市
            loadCity();
        }
    };
    req.open("post", "pa", true);
    req.send(null);
}

function loadCity() {
    var proSelectObj = document.getElementById("proId");
    
    //获取到当前选中的省份，并用于数据库查询
    var proIdToDB = proSelectObj[proSelectObj.selectedIndex].value;
    
    var req = new XMLHttpRequest();
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            var data = req.responseText;
            var myObj = eval("(" + data + ")");
            
            var citySelectObj = document.getElementById("cityId");
            //清理原来的城市信息
            while (citySelectObj.childNodes.length > 0) {
                citySelectObj.removeChild(citySelectObj.lastChild);
            }
            
            for (var i = 0; i < myObj.length; i++) {
                var oneCity = myObj[i];
                var cityKey = oneCity.split("-")[0];
                var cityValue = oneCity.split("-")[1];
                
                var newOption = document.createElement("OPTION");
                newOption.value = cityKey;
                newOption.innerHTML = cityValue;
                
                citySelectObj.appendChild(newOption);
            }
        }
    };
    req.open("post", "ca", true);
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    req.send("proId=" + proIdToDB);
}
</script>
</head>
<body onload="loadProvince()">    <!-- 当页面加载完毕时执行 -->

省：
<select id="proId" onchange="loadCity()"> <!-- 选项option变更的时候触发事件 -->
</select>

城市：
<select id="cityId">
</select>
</body>
</html>

serverlet 获取地市数据

package com.shxt.lesson15.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ProvinceAjaxServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //加载省份信息
        request.setCharacterEncoding("utf-8");
        try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3308/lingyun1", "root", "mysql");
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery("select * from shxt_province");
            
            ArrayList<String> provinceList = new ArrayList<String>();
            while (rs.next()) {
                String key = rs.getString("PROID");
                String value = rs.getString("PRONAME");
                provinceList.add("\"" + key + "-" + value + "\"");
            }
            
            response.setContentType("text/html; charset=utf-8");
            PrintWriter out = response.getWriter();
            System.out.println(provinceList);
            
            out.print(provinceList);
            
            out.flush();
            out.close();
            
        } catch (Exception e) {
            e.printStackTrace();
        }
        
    }

}

Serverlet 根据地市代码获取城市数据

package com.shxt.lesson15.servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CityAjaxServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        try {
            String proId = request.getParameter("proId");
            String sql = "select * from shxt_city where PROID = ‘" + proId + "‘";
            Class.forName("com.mysql.jdbc.Driver");
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3308/lingyun1", "root", "mysql");
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery(sql);
            
            ArrayList<String> cityList = new ArrayList<String>();
            while (rs.next()) {
                String key = rs.getString("CITYID");
                String value = rs.getString("CITYNAME");
                cityList.add("\"" + key + "-" + value + "\"");
            }
            
            response.setContentType("text/html; charset=utf-8");
            PrintWriter out = response.getWriter();

            out.print(cityList);
            
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

小例子

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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=utf-8">
<title>Insert title here</title>
<!-- ajax 异步交互（javascript和xml的形式） -->
<script type="text/javascript">
function validData() {
    
    var value1 = document.getElementById("myText1").value;
    var value2 = document.getElementById("myText2").value;
    
    //请求对象 request
    var req = new XMLHttpRequest();
    
    //创建一个监听函数：监视ajax的各个状态：
    //1、open状态：servlet（可以接收参数）
    //2、send发送：发送参数、【重点】需要设置请求头部信息
    //3、reciving反馈：servlet开始向页面发送反馈信息
    //4、loaded载入：servlet发送的信息全部接收完毕
    req.onreadystatechange = function() {
        if (req.readyState == 1) {    //open：准备时间
            var mySpan = document.getElementById("showPosition");
            mySpan.innerHTML = "<img src=‘a.jpg‘ />";
            document.getElementById("myBtn").style.display = "none";
        } else if (req.readyState == 4) {
            var data = req.responseText;
            document.getElementById("myBtn").style.display = "block";
            document.getElementById("showPosition").innerHTML = data;
        }
    };
    
    //（用post方式）打开myAjax服务应用（Server applet）
    req.open("post", "myAjax", true);
    
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    //发送
    req.send("a=" + value1 + "&b=" + value2);
}
</script>

</head>
<body>
<input id="myText1" /><br />
<input id="myText2" onblur="validData()" /><span id="showPosition"></span><br />
<input />
<input type="button" id="myBtn" value="提交" />
</body>
</html>

serverlet

package com.shxt.lesson15.servlets;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet {

    /**
     * Input/Output    字节流（byte的流）
     * Reader/Writer 字符流（char的流）
     * InputStreamReader ---- 将input转为reader（byte流变char流）
     * */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        try {
            String txt1 = request.getParameter("a");
            String txt2 = request.getParameter("b");
            
            System.out.println(txt1 + ", " + txt2);
            
            Thread.sleep(5000);
            
            //【重点】设置正文类型 -- 页面html
            response.setContentType("text/html; charset=utf-8");
            
            //servlet向页面发送信息，需要一个response的响应对象
            PrintWriter out = response.getWriter();    //Writer流（字符型输出流---向目标写入信息）
            
            out.print("返回的信息:发送成功");
            
            out.flush();    //刷新--流中的数据清空
            out.close();    //流、关闭
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}