使用AJax和JavaScript实现省市区三级联动

最新推荐文章于 2022-12-18 13:56:30 发布

Bryant 024

最新推荐文章于 2022-12-18 13:56:30 发布

阅读量1.7k

点赞数 3

分类专栏： JavaEE

本文链接：https://blog.csdn.net/sinat_19833881/article/details/58002250

版权

本文详细介绍了如何使用Ajax和JavaScript实现省市区三级联动。通过Ajax技术，可以在不刷新整个页面的情况下，实现实时更新数据，提高用户体验。文章包括实现步骤，包括获取省份信息、响应式触发市区和区信息的获取，以及对Ajax应用的简单总结。

摘要由CSDN通过智能技术生成

Ajax实现省市区三级联动

浅谈Ajax
Ajax（Asynchronous JavaScript and XML）异步的javaScript和xml，即可以在整个页面不刷新的情况下，实现局部页面的刷新，主要要的例子有：新浪微博，当然也可以实现三级联动的效果，这正是本博客要着重介绍的内容。
原理图解：
没有使用Ajax之前，从请求到响应的过程
[使用Ajax之后，从请求到响应的过程
效果图：
这里写图片描述
实现步骤：

编写三级联动页面

请选择地址：
<select id="province" name="province">
</select>
<select id="city" name="city">
</select>
<select id="area" name="area">
</select>

2.为body添加onload事件，使得在页面加载的同时就获得省份的值，并且赋值给省份的下拉选择框

<body onload="getProvince()">

3.Ajax编写getProvince()得到省份信息

<script type="text/javascript">
    //封装生成xmlHttp对象
    var xmlHttp;
    function getXMLHttpRequest() {
    
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();

        } else {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    //Ajax得到省份
    function getProvince() {
    
        //1.生成xmlHttp对象
        xmlHttp = getXMLHttpRequest();
        //2.设置请求参数（method,url,async）
        xmlHttp.open("Get", "../../GetProvinceServlet", true);
        //3.监听服务器返回的数据
        xmlHttp.onreadystatechange = getProvinceCallBack;
        //4.发送请求
        xmlHttp.send();

    }

    //3.获得省份的回调函数
    function getProvinceCallBack() {
    
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            //接收服务器返回的数据
            var xmlDoc = xmlHttp.responseXML;
            var provinces = xmlDoc.getElementsByTagName("province");
            var provinceSelect = document.getElementById("province");
            for (var i = 0; i < provinces.length; i++) {
                var option = document.createElement("option");
                option.value = provinces[i].firstChild.firstChild.nodeValue;
                option.text = provinces[i].lastChild.firstChild.nodeValue;
                provinceSelect.appendChild(option);
            }
            getCity(provinceSelect.value);
        }

    }

4.编写GetProvinceServlet从数据库得到省份信息

package cn.com.mp.front.servlet;

import java.io.IOException

最低0.47元/天解锁文章

Bryant 024

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用AJax和JavaScript实现省市区三级联动

Ajax实现省市区三级联动浅谈Ajax Ajax（Asynchronous JavaScript and XML）异步的javaScript和xml，即可以在整个页面不刷新的情况下，实现局部页面的刷新，主要要的例子有：新浪微博，当然也可以实现三级联动的效果，这正是本博客要着重介绍的内容。原理图解：效果图：实现步骤：编写三级联动页面
复制链接

扫一扫