简单的AJAX封装的三级联动

最新推荐文章于 2024-08-21 14:09:37 发布
最新推荐文章于 2024-08-21 14:09:37 发布
阅读量179 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3164085/blog/822762
版权

<!--做的省市县的一个三级联动 利用了ajax--手敲的代码 有错误 需谅解(lxl)>

<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript">

window.οnlοad=fonction(){

    ajax("get","city","type=1",true,function(request){

            var result=request.responseText;

            eval("var ss="+result);

            var pid = document.getElementById("pid");

    for(var i=0;i<ss.length;i++){

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

                            opt.value=ss[i].code;

                            opt.text=ss[i].name;

                            pid.appendChild(opt);

}

},null,null);//这边的404 之类的异常先不处理

}

/*getcity方法传入一个参数provience 得到市级的name;

*/

     function getcity(provinceCode){
       ajax("get", "city","type=2"+"&"+"provinceCode="+provinceCode, true,function(request){  //provinceCode
           var result = request.responseText;
           eval("var ss="+result);

        //让市级恢复请选择的状态。
           var cid = document.getElementById("cid");
           cid.options.length=1;

        //让县级恢复请选择的状态。 这样不会造成累加循环。
           var tid= document.getElementById("tid");
            tid.options.length = 1;
            for (var i = 0; i < ss.length; i++) {
                    var opt = document.createElement("option");
                    opt.value = ss[i].code;
                    opt.text = ss[i].name;
                    cid.appendChild(opt);
            }
       }, null, null);
   }
         function getTown(cityCode){
             ajax("get","city", "type=3"+"&"+"cityCode="+cityCode, true, function(request){
                  var result=request.responseText;
                  eval("var ss="+result);
                  var tid= document.getElementById("tid");
                  tid.options.length = 1;
                
                  for (var i = 0; i < ss.length; i++) {
                      var opt = document.createElement("option");
                        opt.value = ss[i].code;
                        opt.text = ss[i].name;
                        tid.appendChild(opt);
                }
             }, null, null)
         }

</script>

  </head>
  <body>
<select id="pid"  οnchange="getcity(this.value);">
        <option>-请选择-</option>
</select>
<select  id="cid" οnchange="getTown(this.value)">
        <option>-请选择-</option>
</select>
<select id ="tid" >
        <option>-请选择-</option>
</select>
</body>
</html>

转载于:https://my.oschina.net/u/3164085/blog/822762

chuangexian9741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax三层封装,ajax的三次封装简单概况
weixin_35838394的博客
08-05 470
原生ajax:readyState 准备状态status 页面状态send 发送请求open 打开对象,设置请求XMLHttpRequest 火狐 谷歌 等浏览器适用ActiveXObject IE适用ajax第一次封装 (内容顺序不唯一)$.ajax({url:"",//路径data:{},//传递的...
jQuery 对ajax的三层封装
SqrsCbrOnly1的博客
06-11 985
12.1jQuery对Ajax的封装 jQuery中的ajax解决了大部分浏览器的兼容性问题 javascript使用ajax时，需要使用XMLHttpRequest对象,jQuery使用ajax时，也需要使用XMLHttpRequest对象 jQuery对Ajax的第一层次封装 $.ajax() jQuery对Ajax的第二层次封装 $.get() $.post() load() jQuery对...
jquery+ajax实现省市区三级联动 （封装和不封装两种方式）|angluo-javascript-190866.pdf
10-19
主要为大家详细介绍了jquery+ajax实现省市区三级联动的相关代码，包括封装和不封装两种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用jQuery,ajax,实现三级联动封装JS的文件
weixin_30652271的博客
05-15 118
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV，造三个下拉扔进去 var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'&g...
城市三级联动 AJAX-原生js封装
weixin_30906425的博客
02-07 122
话不多说我们先来一张效果图给大家看一下： html代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>城市三级联动 - citys-原生js封装</title> 　　<link rel="s...
ajax下拉栏三级联动,ajax三级联动下拉菜单效果
weixin_34650199的博客
08-06 556
ajax写三级联动，先写一个文件类吧，以后用的时候直接调用即可；来找一张表：实现：中国地域的三级联动：省、市、区；图：说一下思路：(1)当用户选择省份的时候触发事件，把当前的省份的id通过ajax发出请求传递到服务端的程序中(2)比如取中国地域，中国是0001，那么自带号为0001的便是中国地域；北京的代号为11，那么子代号为11的便是北京时的市区，也就是说根据主代号查询子代号；(3)服务端根据客...
php用ajax实现三级联动,使用php ajax写省、市、区、三级联动
weixin_28720573的博客
08-05 490
题目要求：要求：写一个省市区(或者年月日)的三级联动，实现地区或时间的下拉选择。实现技术：php ajax实现：省级下拉变化时市下拉区下拉跟着变化，市级下拉变化时区下拉跟着变化。使用chinastates表查询无标题文档三级联动$(document).ready(function(e) {sheng();shi();qu();$("#sheng").change(function(){shi();...
python三级联动_ajax 实现三级联动
weixin_33918358的博客
02-20 396
ajax 实现三级联动，相当于写了一个小插件，用的时候直接拿过来用就可以了，这里我用了数据库中的chinastates表，数据库内容很多，三级联动里的地区名称都在里面，采用的是代号副代号的方式比如说北京吧，北京的代号是11，它下面的北京市副代号就11， 北京市的主代号是1101，北京市下面的地区副代号就是1101，调地区的时候可以根据主代号查询和它相同的副代号，就能查询出来想要让三级联动的内容在页...
ajax省市区三级联动的思路,jquery和ajax实现省市区三级联动封装和不封装两种方式...
weixin_42584758的博客
08-06 332
本文主要为大家详细介绍了jquery+ajax实现省市区三级联动的相关代码，包括封装和不封装两种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。首先，要实现如下图效果，1、要理清思路：先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。2、用到的数据库表：Chinastates表规律：根据国家级(中国)的areacode查询省级...
jQuery ajax实现省市县三级联动
10-20
【jQuery AJAX 实现省市县三级联动】 在网页开发中，经常需要实现省市县（或其它类似层次结构）的联动选择效果，以便用户在选择某一区域时，下一级的区域列表能够自动更新。jQuery 和 AJAX 技术可以帮助我们轻松地...
二级联动、三级联动
05-25
在本项目中，我们使用了SpringMVC作为后端框架，MyBatis作为持久层工具，通过Ajax实现前后端的异步通信，构建了一个完整的二级和三级联动功能。 首先，我们需要理解SpringMVC的工作原理。SpringMVC是一个模型-视图-...
SSM简单三级联动代码示例
01-24
在本示例中，“三级联动”指的是在数据展示或数据筛选时，三个下拉菜单（或其他选择组件）之间存在依赖关系，当用户在其中一个下拉菜单中做出选择时，其他两个下拉菜单会根据这个选择动态更新其选项。这种功能常见于...
ajax+mysql+jsp省市区三级联动显示
04-14
在IT行业中，省市区三级联动是一种常见的前端交互功能，它常用于地址选择或者地理位置筛选等场景。本项目基于Ajax、MySQL数据库和JSP技术实现这一功能，为用户提供流畅且便捷的下拉选择体验。 首先，我们需要理解每...
3级联动 ajax java_ajax三级联动的实现方法
weixin_34873798的博客
02-26 170
ajax 实现三级联动，相当于写了一个小插件，用的时候直接拿过来用就可以了，这里我用了数据库中的chinastates表，数据库内容很多，三级联动里的地区名称都在里面，采用的是代号副代号的方式比如说北京吧，北京的代号是11，它下面的北京市副代号就11， 北京市的主代号是1101，北京市下面的地区副代号就是1101，调地区的时候可以根据主代号查询和它相同的副代号，就能查询出来想要让三级联动的内容在页...
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 529
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
最新发布
galaxyJING的博客
08-21 254
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 889
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 997
react详细自我学习笔记，内容包括JSX、Redux、Router等
ajax三级联动啥意思,使用Ajax怎么实现一个三级联动功能
05-25
三级联动指的是在一个下拉列表中选择一个选项后，会根据该选项的值动态生成下一个下拉列表的选项。比如，选择一个省份后，那么第二个下拉列表中只会显示该省份的城市，再选择一个城市后，第三个下拉列表中只会显示该城市的区县。 使用Ajax可以实现三级联动功能。具体实现步骤如下： 1. 在页面中创建三个下拉列表，分别代表省、市、区县。 2. 给省份的下拉列表绑定一个onchange事件，当选中省份时触发事件。 3. 在事件中使用Ajax向后台发送请求，获取该省份的所有城市，并将城市的信息填充到市的下拉列表中。 4. 给市的下拉列表绑定一个onchange事件，当选中城市时触发事件。 5. 在事件中使用Ajax向后台发送请求，获取该城市的所有区县，并将区县的信息填充到区县的下拉列表中。 下面是一个简单的Ajax三级联动示例： HTML代码： ``` <select id="province"> <option value="">请选择省份</option> <option value="1">北京</option> <option value="2">上海</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="area"> <option value="">请选择区县</option> </select> ``` JavaScript代码： ``` // 绑定省份下拉列表的onchange事件 document.getElementById('province').onchange = function() { var provinceId = this.value; // 发送Ajax请求获取城市数据 ajax('get', '/getCity', {provinceId: provinceId}, function(data) { // 根据返回的数据填充城市下拉列表 var citySelect = document.getElementById('city'); citySelect.innerHTML = '<option value="">请选择城市</option>'; for (var i = 0; i < data.length; i++) { var option = document.createElement('option'); option.value = data[i].id; option.text = data[i].name; citySelect.appendChild(option); } }); }; // 绑定城市下拉列表的onchange事件 document.getElementById('city').onchange = function() { var cityId = this.value; // 发送Ajax请求获取区县数据 ajax('get', '/getArea', {cityId: cityId}, function(data) { // 根据返回的数据填充区县下拉列表 var areaSelect = document.getElementById('area'); areaSelect.innerHTML = '<option value="">请选择区县</option>'; for (var i = 0; i < data.length; i++) { var option = document.createElement('option'); option.value = data[i].id; option.text = data[i].name; areaSelect.appendChild(option); } }); }; // 封装Ajax函数 function ajax(method, url, data, success) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); success(data); } }; xhr.open(method, url, true); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.send(JSON.stringify(data)); } ``` 其中，/getCity和/getArea是后台接口，根据传入的省份id或城市id返回对应的城市或区县数据。在实际应用中需要根据具体情况进行修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值