Ajax地域选择demo

index.jsp只用于转发到Servlet获得省份数据再转发到province.jsp

index.jsp

<%@ page language="java" contentType="text/html; UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/">
   
<!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>
</head>
<body>

<jsp:forward page="chinaServlet" >
   <jsp:param name="method" value="getProvinces"></jsp:param>
</jsp:forward>
   
</body>
</html>

province.jsp

<%@ page language="java" contentType="text/html; UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<base href="${pageContext.request.scheme }://${pageContext.request.serverName }:${pageContext.request.serverPort }${pageContext.request.contextPath}/">
  
<!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">
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<title>Insert title here</title>
<%response.setCharacterEncoding("UTF-8"); %>
<script type="text/javascript">
   $(function() {
    $("#province").change(function() {

        $("#city option:not(:first)").remove();

        var url = "chinaServlet";

        var provinceId = $(this).val();
        //alert(provinceId);
        if(provinceId!=""){
        var json = {"method":"getCitys","provinceId":provinceId};
        $.post(url,json, function(data) {
            
            //alert(data[1].name);
            for(var i = 0;i<data.length;i++){
                $("#city").append("<option value="+data[i].cityId+">"+data[i].name+"</option>")
            }
        },"json")
      }
    });
})
</script>

</head>
<body>
  <select id="province"> 
    <option value="">请选择...</option>
    <c:forEach items="${requestScope.provinces }" var="provinces">
       <option value="${provinces.provinceId}">${provinces.name}</option>
    </c:forEach>
   </select>
   
   <select id="city"> 
    <option value="">请选择...</option>
   </select>
   
</body>
</html>

Servlet

package com.servlet;

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.List;

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

import com.dao.CityDao;
import com.dao.ProvinceDao;
import com.dao.impl.CityDaoImpl;
import com.dao.impl.ProvinceDaoImpl;
import com.domain.City;
import com.domain.Province;
import com.google.gson.Gson;
import com.sun.media.jfxmedia.events.NewFrameEvent;

/**
 * Servlet implementation class ChinaServlet
 */
@WebServlet("/chinaServlet")
public class ChinaServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ChinaServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
             doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        String methodName = request.getParameter("method");
        System.out.println(methodName);
        
        try {
            Method method = getClass().getDeclaredMethod(methodName, HttpServletRequest.class,HttpServletResponse.class);
            method.invoke(this, request,response);//反射获得方法
        } catch (NoSuchMethodException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (SecurityException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalArgumentException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    public void getProvinces(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //得到省份数据
        ProvinceDao dao = new ProvinceDaoImpl();
        List<Province> provinces = dao.queryForList();
        System.out.println(provinces);
        request.setAttribute("provinces", provinces);
        request.getRequestDispatcher("/WEB-INF/pages/province.jsp").forward(request, response);
    }
    
    public void getCitys(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //等到城市数据
        String provinceId = request.getParameter("provinceId");
        System.out.println(provinceId);
        CityDao dao = new CityDaoImpl();
        List<City> cities = dao.queryByProvinceId(provinceId);
        //System.out.println(cities);
        Gson gson = new Gson();
        String json = gson.toJson(cities);
        //System.out.println(json);
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/javascript");
        response.getWriter().print(json);
        
    }   

}

Dao类方法不在这里贴了

 源码下载 https://files.cnblogs.com/files/lusufei/AJAX%E5%9C%B0%E5%9F%9F%E9%80%89%E6%8B%A9demo.zip

相关阅读:
c# 日期函数DateTime.ToString()日期的各种格式（本人亲测）
C# Excel导入、导出【源码下载】
微信支付服务器CA证书更换服务器安装der证书的方法 DigiCert的根证书
 重置winsock目录解决不能上网的问题
 模型验证组件 FluentValidation
对于“Newtonsoft.Json”已拥有为“NETStander.Library”定义的依赖项，解决办法
 .NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一)
C# 中参数验证方式的演变
 一步一步ITextSharp 低级操作函数使用
 Winform 打印PDF顺序混乱，获取打印队列
原文地址：https://www.cnblogs.com/lusufei/p/7262933.html