Ajax实现省市二级联动（源代码）

最新推荐文章于 2021-08-06 03:07:55 发布

qinglang1987

最新推荐文章于 2021-08-06 03:07:55 发布

阅读量6.5k

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest list function servlet string

本文链接：https://blog.csdn.net/wangxw8746/article/details/6870493

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp)

<%@ page language="java" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>省市联动</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
  var xhr;
  function change(provinceId){
      //如果选择"==请选择==" 清空城市下拉列表
   if(provinceId=='0'){
    clearCity();
    return;
   }
   //创建XMLHttpRequest对象
   createXmlHttp();
   //设置回调函数
   xhr.onreadystatechange = response;
   //初始化
   xhr.open('GET','ListServlet.do?provinceId='+provinceId,true);
   //设置不使用缓存
   xhr.setRequestHeader("If-Modified-Since","0");
   //发送请求
   xhr.send(null);
  }

  function response(){
   var city = document.getElementById("city");
   if(xhr.readyState == 4 && xhr.status == 200 ){
    var s = xhr.responseText;
    var citys = s.split(",");
    clearCity();
    for(var i=0;i<citys.length;i++){
     city.options[city.options.length] = new Option(citys[i],citys[i]);
    }
   }
  }

     function createXmlHttp(){
     //非IE浏览器创建XmlHttpRequest对象
     if(window.XmlHttpRequest){
        xhr = new XmlHttpRequest();
      }
      //IE浏览器创建XmlHttpRequest对象
      if(window.ActiveXObject){
        try{
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){
        xhr = new ActiveXObject("msxml2.XMLHTTP");
        }
      }
     }

  //清空城市下拉列表
  function clearCity(){
   var city = document.getElementById("city");
   city.options.length = 0;
   city.options[0] = new Option('==请选择==','0');
  }

</script>
</head>

<body>
    <h1>省市联动</h1><hr>
    <h3>Where Are You From ?</h3>
    省份：<select id="province" οnchange="change(this.value)">
      <option value="0">==请选择==</option>
      <option value="1">浙江</option>
      <option value="2">江苏</option>
      <option value="3">湖北</option>
      <option value="4">湖南</option>
      <option value="5">广东</option>
        </select>
    城市：<select id="city">
      <option>==请选择==</option>
        </select>
</body>
</html>
2、处理逻辑的servlert类 ListServlet.java

package com.test.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;

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

public class ListServlet extends HttpServlet {

private static final long serialVersionUID = 1L;
public static Map<String,List<String>> map= new HashMap<String,List<String>>();

public void init() throws ServletException{
  List<String> list = new ArrayList<String>();
  list.add("杭州");
  list.add("绍兴");
  list.add("宁波");
  list.add("台州");
  map.put("1", list);
  list = new ArrayList<String>();
  list.add("南京");
  list.add("苏州");
  list.add("常州");
  list.add("无锡");
  map.put("2", list);
  list = new ArrayList<String>();
  list.add("武汉");
  list.add("鄂州");
  list.add("荆州");
  list.add("十堰");
  map.put("3", list);
  list = new ArrayList<String>();
  list.add("长沙");
  list.add("岳阳");
  list.add("常德");
  list.add("张家界");
  map.put("4", list);
  list = new ArrayList<String>();
  list.add("广州");
  list.add("珠海");
  list.add("深圳");
  list.add("东莞");
  map.put("5", list);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
  String provinceId = request.getParameter("provinceId");
  List<String> list = map.get(provinceId);
  StringBuffer sb = new StringBuffer();
  if(list!=null){
   for(String s: list) {
    sb.append(s).append(",");
   }
   if(!list.isEmpty()){
    sb.deleteCharAt(sb.length()-1);
   }
  }

  response.setContentType("test/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  out.print(sb.toString());
  out.close();
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}

3、web.xml 信息配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
      <servlet-name>myServlet</servlet-name>
      <servlet-class>com.test.ajax.ListServlet</servlet-class>
</servlet>
<servlet-mapping>
      <servlet-name>myServlet</servlet-name>
      <url-pattern>/ListServlet.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
    <welcome-file>list.jsp</welcome-file>
</welcome-file-list>
</web-app>

4、截图显示

qinglang1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Ajax实现省市二级联动（源代码）

1 、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp) 省市联动 var xhr; function change(provinceId){ //如果选择"==请选择==" 清空城市下拉列表 if(provinceId=='0'){ clearCity()
复制链接

扫一扫