ajax（二）之省市二级菜单联动（无sql）

最新推荐文章于 2021-02-12 11:41:33 发布
最新推荐文章于 2021-02-12 11:41:33 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： ajax 文章标签： ajax xml 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhegaa/article/details/64158859
版权

这里将介绍三种ajax的方式做省市二级菜单，基础知识在前一篇。直接看源码

1.以xml形式返回二级菜单栏（与数据库无关）

<body>
    <select id="provinceID">
        <option>选择省份</option>   
        <option>吉林省</option>    
        <option>辽宁省</option>    
        <option>山东省</option>    
        <option>湖南省</option>    
    </select>
    <select id="cityID">
        <option>选择城市</option>   
    </select>
    <hr/>
    <div>
        <!-- 显示结果 -->
    </div>
    <script type="text/javascript">
        document.getElementById("provinceID").onchange=function(){
            //清空原来的city列表
            var citySelectElement = document.getElementById("cityID");
            var cityElementArray = citySelectElement.options;
            var size = cityElementArray.length;
            if(size > 1){
                for(var i = size-1 ; i>0 ;i--){
                    citySelectElement.removeChild(cityElementArray[i])
                }
            }

            var province = this[this.selectedIndex].innerHTML;
            province = encodeURI(province);
            //创建AJAX引警对象
            var xhr = createXHR();
            //设置函数监听
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //以字符串形式接收
                        //var msg = xhr.responseText;

                        //以XML形式接收
                        var xmlDocument = xhr.responseXML;
                        var cityElementArray = xmlDocument.getElementsByTagName("city");
                        var size = cityElementArray.length;
                        for(var i = 0 ; i <size ; i++){
                            var city =  cityElementArray[i].firstChild.nodeValue;
                            var optionElement = document.createElement("option");
                            optionElement.innerHTML  = city;
                            document.getElementById("cityID").appendChild(optionElement);
                        }
                    }
                }
            }

            //准备以get方式发送请求
            xhr.open("get","/ajax/CityServlet?time="+new Date().getTime()+"&province="+province);

            //真正发送请求
            xhr.send(null);
        }
        function createXHR(){
            var xhr = null;
            try{
                xhr = new ActiveXObject("microsoft.xmlhttp");
            }catch(e){
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    window.alert("你的浏览器太差");
                }
            }
            return xhr;
        }
    </script>
  </body>



public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        System.out.println("PostServlet::doGet()");
        String province = request.getParameter("province");
        byte[] buf = province.getBytes("ISO8859-1");
        province = new String(buf,"UTF-8");
        System.out.println("省份是：" + province);
        String msg = null;

        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        //这里写的是返回的xml格式的文本
        pw.write("<root>");
        if(province.equals("吉林省")){
            pw.write("<city>长春[吉林省]</city>");
            pw.write("<city>吉林市[吉林省]</city>");
            pw.write("<city>松原[吉林省]</city>");
            pw.write("<city>通化[吉林省]</city>");
        }else if(province.equals("辽宁省")){
            pw.write("<city>沈阳[辽宁省]</city>");
            pw.write("<city>大连[辽宁省]</city>");
            pw.write("<city>鞍山[辽宁省]</city>");
            pw.write("<city>抚顺[辽宁省]</city>");
            pw.write("<city>铁岭[辽宁省]</city>");
        }else if(province.equals("山东省")){
            pw.write("<city>济南[山东省]</city>");
            pw.write("<city>青岛[山东省]</city>");
            pw.write("<city>威海[山东省]</city>");
        }else{
            pw.write("<city>xxx[xxx]</city>");
            pw.write("<city>xxx[xxx]</city>");
            pw.write("<city>xxx[xxx]</city>");
        }
        pw.write("</root>");
        }
}

2 .以json形式返回二级菜单栏（与数据库无关）
这里有点尴尬的是：有人不会写json代码，不知道json数据的格式怎么写。晚点会有一篇介绍json的文章大家可以看一下。从下面我写json的代码来看，很容易出错，如果说写错了json格式的数据，后面接收数据可能会出现问题。因此推荐使用第三方工具解析 JSON。下面方法介绍咯

<body>
    <select id="provinceID">
        <option>选择省份</option>   
        <option>吉林省</option>    
        <option>辽宁省</option>    
        <option>山东省</option>    
        <option>湖南省</option>    
    </select>
    <select id="cityID">
        <option>选择城市</option>   
    </select>
    <hr/>
    <div>
        <!-- 显示结果 -->
    </div>
    <script type="text/javascript">
        document.getElementById("provinceID").onchange=function(){
            //清空原来的city列表
            var citySelectElement = document.getElementById("cityID");
            var cityElementArray = citySelectElement.options;
            var size = cityElementArray.length;
            if(size > 1){
                for(var i = size-1 ; i>0 ;i--){
                    citySelectElement.removeChild(cityElementArray[i])
                }
            }
            var province = this[this.selectedIndex].innerHTML;
            province = encodeURI(province);
            //创建AJAX引警对象
            var xhr = createXHR();
            //设置函数监听
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        //以字符串形式接收
                        var jsonString = xhr.responseText;

                        //将json字符串转化成json格式
                        var jsonObject = eval("("+jsonString+")");

                        var size = jsonObject.length;

                        for(var i = 0 ; i < size ; i++){

                            var city = jsonObject[i].city_name;

                            var optionElement = document.createElement("option");

                            optionElement.innerHTML = city;

                            var divElemenet = document.getElementById("cityID");

                            divElemenet.appendChild(optionElement);
                        }
                    }
                }
            }
            //准备以POST方式发送请求
            xhr.open("get","/ajax/CityServlet1?time="+new Date().getTime()+"&province="+province);

            //真正发送请求
            xhr.send(null);

        }

        function createXHR(){
            var xhr = null;
            try{
                xhr = new ActiveXObject("microsoft.xmlhttp");
            }catch(e){
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    window.alert("你的浏览器太差");
                }
            }
            return xhr;
        }
    </script>
  </body>


 CityServlet1
 public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String province = request.getParameter("province");
        byte[] buf = province.getBytes("ISO8859-1");
        province = new String(buf,"UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        String jsonString = null;

        if(province.equals("吉林省")){
            jsonString="{'city':['长春','吉林市','松原','通化']}";   
        }else if(province.equals("辽宁省")){
            jsonString="{'city':['沈阳','大连','鞍山','抚顺','铁岭']}";   
        }else if(province.equals("山东省")){
            jsonString="{'city':['济南','青岛','威海']}"; 
        }else{
            jsonString = "{'city':['xxx1','xxx2','xxx3']}";
        }
        pw.write(jsonString);

    }

3.第三方工具解析 JSON：把一个javaBean对象创建成json对象
开发步骤：看下面两张图片

第一步：导包，百度一下json包，全部导入就可以
第二部：了解两个类方法
     JSONArray.fromObject(javaBean对象)
            //设置javaBean转化成json时，不包含某个字段
            JsonConfig jsonConfig = new JsonConfig();
            jsonConfig.setExcludes(new String[]{“id”});
            JSONArray jsonArray = JSONArray.fromObject(provinceList,jsonConfig);
这里写图片描述
这里写图片描述

这里写图片描述

ajax代码:

//注意这里的ajax.jsp代码不变。

//改变的是servlet传递数据的方式
CityServlet1
  public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String province = request.getParameter("province");
        byte[] buf = province.getBytes("ISO8859-1");
        province = new String(buf,"UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = response.getWriter();
        String jsonString = null;




        List<City> cityList = new ArrayList<City>();
        if(province.equals("吉林省")){
            cityList.add(new City(1,"长春"));
            cityList.add(new City(2,"吉林市"));
            cityList.add(new City(3,"松原"));
            cityList.add(new City(4,"通化"));
        }else if(province.equals("辽宁省")){
            cityList.add(new City(1,"沈阳"));
            cityList.add(new City(2,"大连"));
            cityList.add(new City(3,"鞍山"));
            cityList.add(new City(4,"抚顺"));
            cityList.add(new City(5,"铁岭"));
        }else if(province.equals("山东省")){
            cityList.add(new City(1,"济南"));
            cityList.add(new City(2,"青岛"));
            cityList.add(new City(3,"威海"));
        }else{
            cityList.add(new City(1,"xx"));
            cityList.add(new City(2,"xx"));
            cityList.add(new City(3,"xxx"));
        }

        //设置去掉javaBean中的id.这个id多余就不要生成Json了
        JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.setExcludes(new String[]{"id"});

        JSONArray jsonArray = JSONArray.fromObject(cityList, jsonConfig);
        //注意哦，返回的值是字符串，所以应该把数组输出。不能直接返回JsonArray
        jsonString = jsonArray.toString();
        System.out.println(jsonArray.toString());
        pw.write(jsonString);
    }
xiaozhegaa
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax省市二级联动
04-26
Ajax省市二级联动，保证能用，SQL脚本在项目中。。。欢迎学习，共同进步
Ajax实现省市二级联动
10-25
ajax初级入门。 无刷新实现省市2级菜单联动。 代码简单，很容易明白。
jquery ajax实现省市二级联动
07-11
该资源包含了一个使用jquery ajax实现的省市二级联动的简单demo，简单易懂，可以参考博客：http://blog.csdn.net/mockingbirds/article/details/46842327
ajax二级联动菜单
yanchao1023的专栏
08-23 930
<br /><%@ page language="java" pageEncoding="UTF-8"%><br /><html><br />    <head><br />        <title>二级菜单联动演示</title><br />        <script type="text/javascript"><br />    var req;<br />    window.onload=function()<br />    {//页面加载时的函数<br />    }<br />   
asp无刷新二级联动菜单
02-28
接下来，服务器端的ASP代码将处理Ajax请求，可能涉及到SQL查询以获取与选定的一级菜单相关的二级菜单数据。查询结果可以是JSON或XML格式，这两种格式都可以被JavaScript轻松解析。解析后，JavaScript会利用这些数据...
ssm框架简单整合增删改查+jq,ajax下拉框+二级省市联动
05-18
这个项目是一个基础的SSM整合实例，旨在帮助初学者理解这些框架如何协同工作并实现基本的CRUD（创建、读取、更新、删除）操作，以及利用Ajax和jQuery实现动态下拉框和二级省市联动效果。 1. **Spring框架**：Spring...
省市县三级菜单联动 C#
10-31
在这个案例中，"省市县三级菜单联动 C#" 是一种实现中国行政区域三级（省、市、县）选择的功能，通常用于地址填写或定位服务。下面我们将详细讨论这个知识点。 首先，我们需要理解“联动”这个词在编程中的含义。...
省市县三级菜单联动（mysql+ajax+json+php）
11-08
在IT行业中，构建一个省市县三级菜单联动的功能是常见的需求，尤其在网页应用中，用于让用户选择他们的地理位置。本项目采用的技术栈包括MySQL数据库、AJAX异步通信、JSON数据格式以及PHP服务器端编程，这些都是Web...
region_3级_省市区三级联动数据库_
10-01
当用户在一级选择一个省后，二级下拉菜单会自动更新为该省的所有城市；同样，选择一个城市后，三级会显示该城市下的所有区县。这种联动效果通过前端和后端的配合实现，依赖于数据库中的层级关系。 这个压缩包包含的...
JavaWeb通过ajax、json实现省市二级联动
04-09
JavaWeb通过ajax、json实现省市二级联动：客户端通过jsp页面，来访问服务器的servlet,服务器访问数据库，返回json数据给客户端
ajax 省市二级联动
08-06
利用ajax无刷新省市二级联动 直接可以使用啊啊
SSM框架 用Jquery和JSON完成的Ajax 实现省市二级联动
03-24
在S2SM的框架下，使用Ajax完成的省市二级联动，使用Jquery完成的Ajax，使用JSON,JSONArray完成，在eclipse下即可运行 一直在找类似的资源找不着，干脆自己写一个和大家分享
Ajax实现省市二级联动（源代码）
在爬行中进步
10-13 6553
1 、实现省市的二级无刷新联动选择省名连接服务器动态加载市名(list.jsp)       省市联动                  var xhr;   function change(provinceId){       //如果选择"==请选择==" 清空城市下拉列表    if(provinceId=='0'){     clearCity()
ajax使用之二级联动（省市）
花2不谢
06-19 963
ajax经常用于二级联动，实现的效果如下: 前台显示代码: 省市二级联动 <!-- --> var xmlDoc; window.onload=function(){ //发出异步请求 var xhr = getXHR(); xhr.onreadystatechange=functi
Ajax实现最简单的省市二级联动
2021_fc的博客
05-24 689
AJAX实现最简单的省市二级联动 实现效果 我这里不会搞动图-_- 难受 我这里使用的是springboot的项目 这里我对Mybatis进行了整合 大家有需要可以去看一下我之前的文章 跳转 项目结构 MySql 表数据 编写Sql <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/my
java联动_java实现的二级联动菜单效果
weixin_30635315的博客
02-12 505
本文实例讲述了java实现的二级联动菜单效果。分享给大家供大家参考，具体如下：JSP代码：二级菜单联动演示var req;window.onload=function(){//页面加载时的函数}function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数var province = document.getElementById('province').value...
AJAX案例二—省市二级联动
YQ转战JAVA学习的小白
07-12 240
AJAX案例二 省市二级联动 案例分析图解 浏览器端 创建Cityutli工具类 ProvinceServlet (获取省份信息) CityServlet(获取城市信息) 获取Province的Ajax请求 获取CityAjax的请求 测试时问题： CityAjax请求：send（ProvinceName）后，在CityServlet接收ProvinceName时会产生中文乱码原因，进而无法传参，获取后续城市信息。 解决： 源代码： CityUtil： *********
Ajax 省市二级联动（主要代码）
weixin_42413651的博客
07-09 775
JS：var teX=document.getElementsByClassName("text")[0];//获取两个select var teT=document.getElementById("city"); gePot("get","province.json",true,"",function(rep){//引用封装的方法获取json的值 arrJson=JSON.parse(r...
DWR框架实现Ajax二级菜单联动无刷新示例
总结来说，这个项目演示了如何利用DWR、Spring和Hibernate构建一个动态的、基于Ajax的二级联动菜单系统，实现了高效的数据获取和页面更新，为用户提供流畅的浏览体验。同时，它也展示了如何组织后端代码，以及如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值