Ajax常用实例-级联下拉列表

最新推荐文章于 2022-11-02 15:01:46 发布

lx127372

最新推荐文章于 2022-11-02 15:01:46 发布

阅读量265

点赞数

分类专栏： Ajax Javaweb

本文链接：https://blog.csdn.net/lx127372/article/details/81322527

版权

Javaweb 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

应用了Ajax重构
先编写AjaxRequest.js文件存在JS文件夹中，具体代码：

var net = new Object(); // 定义一个全局变量net
// 编写构造函数
net.AjaxRequest = function(url, onload, onerror, method, params) {
    this.req = null;
    this.onload = onload;
    this.onerror = (onerror) ? onerror : this.defaultError;
    this.loadDate(url, method, params);
}
// 编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
    if (!method) {
        method = "GET";
    }
    if (window.XMLHttpRequest) {
        this.req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        this.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (this.req) {
        try {
            var loader = this;
            this.req.onreadystatechange = function() {
                net.AjaxRequest.onReadyState.call(loader);
            }
            this.req.open(method, url, true);// 建立对服务器的调用
            if (method == "POST") {// 如果提交方式为POST
                this.req.setRequestHeader("Content-Type",
                        "application/x-www-form-urlencoded"); // 设置请求头
            }
            this.req.send(params); // 发送请求
        } catch (err) {
            this.onerror.call(this);
        }
    }
}

// 重构回调函数
net.AjaxRequest.onReadyState = function() {
    var req = this.req;
    var ready = req.readyState;
    if (ready == 4) {// 请求完成
        if (req.status == 200) {// 请求成功
            this.onload.call(this);
        } else {
            this.onerror.call(this);
        }
    }
}
// 重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function() {
    alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}

然后编写index.jsp文件，并在文件中包含AjaxRequest.js文件

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<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">    
    <script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
//获取省份和直辖市
function getProvince(){
    var loader=new net.AjaxRequest("ZoneServlet?action=getProvince&nocache="+new Date().getTime(),deal_getProvince,onerror,"GET");
}
function deal_getProvince(){
    provinceArr=this.req.responseText.split(",");   //将获取的省份名称字符串分隔为数组

    for(i=0;i<provinceArr.length;i++){      //通过循环将数组中的省份名称添加到下拉列表中
        document.getElementById("province").options[i]=new Option(provinceArr[i],provinceArr[i]);
    }
    if(provinceArr[0]!=""){
        getCity(provinceArr[0]);    //获取市县
    }
}
window.onload=function(){
     getProvince();     //获取省份和直辖市
}

//获取市县
function getCity(selProvince){
    var loader=new net.AjaxRequest("ZoneServlet?action=getCity&parProvince="+selProvince+"&nocache="+new Date().getTime(),deal_getCity,onerror,"GET");
}
function deal_getCity(){
    cityArr=this.req.responseText.split(",");   //将获取的市县名称字符串分隔为数组
    document.getElementById("city").length=0;   //清空下拉列表
    for(i=0;i<cityArr.length;i++){      //通过循环将数组中的市县名称添加到下拉列表中
        document.getElementById("city").options[i]=new Option(cityArr[i],cityArr[i]);
    }
}
function onerror(){}        //错误处理函数
</script>
  </head>

  <body style="font-size: 20pt;">
  请选择：
      <select name="province" id="province" onChange="getCity(this.value)">
      </select>
      -
      <select name="city" id="city">
      </select>
  </body>
</html>

编写ZoneServlet，在doGet()方法中编写代码用于根据传递的不同action参数执行不同的处理方法，其中getProvince()方法从Map集合中获取全部省份信息，并将获取的省份信息连接为一个逗号分隔的字符串，输出到页面上。getCity方法保存Map集合中获取指定省份对应的市县信息，然后用逗号隔开输出到页面上。

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ZoneServlet")


public class ZoneServlet extends HttpServlet {

    /**
     * The doGet method of the servlet. <br>
     *
     * This method is called when a form has its tag value method equals to get.
     * 
     * @param request the request send by the client to the server
     * @param response the response send by the server to the client
     * @throws ServletException if an error occurred
     * @throws IOException if an error occurred
     */
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String action=request.getParameter("action");       //获取action参数的值
        if("getProvince".equals(action)){   //获取省份和直辖市信息
            this.getProvince(request,response);
        }else if("getCity".equals(action)){ //获取市县信息
            this.getCity(request, response);
        }
    }
    /**
     * 获取省份和直辖市
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void getProvince(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("GBK");       //设置响应的编码方式
        String result="";
        CityMap cityMap=new CityMap();//实例化保存省份信息的CityMap类的实例
        Map<String,String[]> map=cityMap.model;//获取省份信息保存到Map中
        Set<String> set=map.keySet();       //获取Map集合中的键，并以Set集合返回
        Iterator it=set.iterator();
        while(it.hasNext()){        //将获取的省份连接为一个以逗号分隔的字符串
            result=result+it.next()+",";
        }
        result=result.substring(0, result.length()-1);  //去除最后一个逗号
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(result);      //输出获取的省份字符串
        out.flush();
        out.close();
    }
    /**
     * 获取市县
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void getCity(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("GBK");   //设置响应的编码方式
        String result="";
        String selProvince=request.getParameter("parProvince"); //获取选择的省份
        selProvince=new String(selProvince.getBytes("ISO-8859-1"),"GBK");
        CityMap cityMap=new CityMap();  //实例化保存省份信息的CityMap类的实例
        Map<String,String[]> map=cityMap.model; //获取省份信息保存到Map中
        String[]arrCity= map.get(selProvince);  //获取指定键的值
        for(int i=0;i<arrCity.length;i++){      //将获取的市县连接为一个以逗号分隔的字符串
            result=result+arrCity[i]+",";
        }
        result=result.substring(0, result.length()-1);  //去除最后一个逗号
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(result);                              //输出获取的市县字符串
        out.flush();
        out.close();
    }
}

这个是城市

import java.util.LinkedHashMap;
import java.util.Map;

public class CityMap {
       /**
     *  全国（省，直辖市，自治区，特别行政区）映射集合
     */
    public static Map<String,String[]> model=new LinkedHashMap();
    static{
        model.put("北京", new String[]{"北京"});
        model.put("上海", new String[]{"上海"});
        model.put("天津", new String[]{"天津"});
        model.put("重庆", new String[]{"重庆"});
        model.put("黑龙江", new String[]{"哈尔滨","齐齐哈尔","牡丹江","大庆","伊春","双鸭山","鹤岗","鸡西","佳木斯","七台河","黑河","绥化","大兴安岭"});
        model.put("吉林", new String[]{"长春","延边","吉林","白山","白城","四平","松原","辽源","大安","通化"});
        model.put("辽宁", new String[]{"沈阳","大连","葫芦岛","旅顺","本溪","抚顺","铁岭","辽阳","营口","阜新","朝阳","锦州","丹东","鞍山"});
        model.put("内蒙古", new String[]{"呼和浩特","呼伦贝尔","锡林浩特","包头","赤峰","海拉尔","乌海","鄂尔多斯","通辽"});
        model.put("河北", new String[]{"石家庄","唐山","张家口","廊坊","邢台","邯郸","沧州","衡水","承德","保定","秦皇岛"});
        model.put("河南", new String[]{"郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店"});
        model.put("山东", new String[]{"济南","青岛","淄博","威海","曲阜","临沂","烟台","枣庄","聊城","济宁","菏泽","泰安","日照","东营","德州","滨州","莱芜","潍坊"});
        model.put("山西", new String[]{"太原","阳泉","晋城","晋中","临汾","运城","长治","朔州","忻州","大同","吕梁"});
        model.put("江苏", new String[]{"南京","苏州","昆山","南通","太仓","吴县","徐州","宜兴","镇江","淮安","常熟","盐城","泰州","无锡","连云港","扬州","常州","宿迁"});
        model.put("安徽", new String[]{"合肥","巢湖","蚌埠","安庆","六安","滁州","马鞍山","阜阳","宣城","铜陵","淮北","芜湖","毫州","宿州","淮南","池州"});
        model.put("陕西", new String[]{"西安","韩城","安康","汉中","宝鸡","咸阳","榆林","渭南","商洛","铜川","延安"});
        model.put("宁夏", new String[]{"银川","固原","中卫","石嘴山","吴忠"});
        model.put("甘肃", new String[]{"兰州","白银","庆阳","酒泉","天水","武威","张掖","甘南","临夏","平凉","定西","金昌"});
        model.put("青海", new String[]{"西宁","海北","海西","黄南","果洛","玉树","海东","海南"});
        model.put("湖北", new String[]{"武汉","宜昌","黄冈","恩施","荆州","神农架","十堰","咸宁","襄樊","孝感","随州","黄石","荆门","鄂州"});
        model.put("湖南", new String[]{"长沙","邵阳","常德","郴州","吉首","株洲","娄底","湘潭","益阳","永州","岳阳","衡阳","怀化","韶山","张家界"});
        model.put("浙江", new String[]{"杭州","湖州","金华","宁波","丽水","绍兴","雁荡山","衢州","嘉兴","台州","舟山","温州"});
        model.put("江西", new String[]{"南昌","萍乡","九江","上饶","抚州","吉安","鹰潭","宜春","新余","景德镇","赣州"});
        model.put("福建", new String[]{"福州","厦门","龙岩","南平","宁德","莆田","泉州","三明","漳州"});
        model.put("贵州", new String[]{"贵阳","安顺","赤水","遵义","铜仁","六盘水","毕节","凯里","都匀"});
        model.put("四川", new String[]{"成都","泸州","内江","凉山","阿坝","巴中","广元","乐山","绵阳","德阳","攀枝花","雅安","宜宾","自贡","甘孜州","达州","资阳","广安","遂宁","眉山","南充"});
        model.put("广东", new String[]{"广州","深圳","潮州","韶关","湛江","惠州","清远","东莞","江门","茂名","肇庆","汕尾","河源","揭阳","梅州","中山","德庆","阳江","云浮","珠海","汕头","佛山"});
        model.put("广西", new String[]{"南宁","桂林","阳朔","柳州","梧州","玉林","桂平","贺州","钦州","贵港","防城港","百色","北海","河池","来宾","崇左"});
        model.put("云南", new String[]{"昆明","保山","楚雄","德宏","红河","临沧","怒江","曲靖","思茅","文山","玉溪","昭通","丽江","大理"});
        model.put("海南", new String[]{"海口","三亚","儋州","琼山","通什","文昌"});
        model.put("新疆", new String[]{"乌鲁木齐","阿勒泰","阿克苏","昌吉","哈密","和田","喀什","克拉玛依","石河子","塔城","库尔勒","吐鲁番","伊宁"});
    }

}

大概流程就是用window.οnlοad=function(){getProvince();}在页面载入后显示默认省份并且调取获取省份的方法getProvince,然后在这个方法里传到ZoneServlet里面的doGet中然后执行getProvince方法，当你选择里面的省份的时候，改变了列表里面的元素，就用onChange=”getCity(this.value)”这个方法执行了getCity（）方法，之后是跟获取省的一样了。
写这个代码遇到的问题：
1. 一开始列表里什么都没有了，找了半天原因觉得是AjaxRequest.js文件没写好，这个文件一开始我是直接在WebContent这个里面建的，没有新建一个JS文件夹，后来我就在WebContent这个里面新建了一个JS文件夹，把这个AjaxRequest.js放在里面，然后把index里面的用这个文件的代码改一下位置，就好了，我也不知道为啥要放在新建的一个JS文件夹里。
2. 出现了java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986这个错误提示，百度了半天找了几个解决办法，发现时Tomact版本问题，解决方案有配置tomcat的catalina.properties
添加或者修改：
tomcat.util.http.parser.HttpParser.requestTargetAllow=|{}
但是我用了还是不好使，只能换Tomact版本了。

lx127372

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Ajax常用实例-级联下拉列表

应用了Ajax重构先编写AjaxRequest.js文件存在JS文件夹中，具体代码：var net = new Object(); // 定义一个全局变量net// 编写构造函数net.AjaxRequest = function(url, onload, onerror, method, params) { this.req = null; this.onload...
复制链接

扫一扫