Ajax 请求方法 select 级联

淩亂°似流年 2023-05-30 06:08 10阅读 0赞

# 一、创建Ajax #

let req = new XMLHttpRequest();

# 二、发送请求 #

req.open('POST','asses/test/city.json',false);//发送请求
     req.send();//将请求发送到服务器上

open(method，ul，async)有三个参数；  
1、请求类型：GET和POST。  
2、请求文件的地址。  
3、true（异步）或 false（同步）

# 三、请求得到响应返回数据 #

if (req.readyState === 4 && req.status === 200){ 
            let tes = JSON.parse(req.responseText);//处理返回的数据
            console.log(tes);
        }else { 
            document.write('错误');
        }

1、responseText:获得字符串形式的相应数据。  
2、responsXML:获得XML形式的相应数据。  
3、status：以数字和文本形式返回http状态码。  
（1）200：成功。  
（2）404：页面未找到。  
4、readyState属性：响应返回成功的时候得到通知。  
（1）0：请求未初始化，open还没有调用。  
（2）1：服务器连接已建立，open已经调用了。  
（3）2：请求已经接收，也就是接收到头信息了。  
（4）3：请求处理中，也就是接收到响应主体了。  
（5）4：请求已完成，且响应已就绪，也就是响应完成了。

# 四、jQuery方法 #

$.ajax({ 
            type: 'post',//请求类型
            url: 'asses/test/city.json',//文件地址
            async: false,//异步（同步）
            dataType: 'json',//文件类型（json）
            success:function (value) { //成功执行函数
                data = value;
            },
            error:function (e) { //失败执行函数
                console.error(e);
            }
        });

很方便，代码简单，但还是支持写原生的。

**html**

<div style="width: 610px;margin: 20px auto;">
        <div style="margin-bottom: 10px;"><h3>选择所在地</h3></div>
        <select id="capital">
            <option>请选择省会</option>
        </select>
        <select id="cit">
            <option>请先选择省会</option>
        </select>
        <select id="county">
            <option>请先选择区县</option>
        </select>
    </div>

**js**

let capital = $('#capital');
        let cit = $('#cit');
        let county = $('#county');
        let data = [];
        let arr;
        
        // 原生js创建Ajax请求
        /*let req = new XMLHttpRequest();//创建Ajax对象 req.open('POST','asses/test/city.json',false);//发送请求 req.send();//将请求发送到服务器上 if (req.readyState === 4 && req.status === 200){ let tes = JSON.parse(req.responseText);//处理返回的数据 console.log(tes); }else { document.write('错误'); }*/
    
        // jQuery创建Ajax请求
        $.ajax({ 
            type: 'post',
            url: 'asses/test/city.json',
            async: false,
            dataType: 'json',
            success:function (value) { 
                data = value;
            },
            error:function (e) { 
                console.error(e);
            }
        });
    
        //生成第一个select的option
        for (let i=0;i<=data.length-1;i++){ 
            let op = $('<option value="' + i + '">' + data[i].name + '</option>');
            capital.append(op);
        }
        //根据第一个点击来生成第二个select的option
        capital.change(() =>{ //省会改变
            cit.empty();//清空cit的option
            county.empty();//清空county的option
            if (capital.val() == '请选择省会'){ 
                let op = $('<option>请先选择省会</option>');
                let op2 = $('<option>请先选择城市</option>');
                cit.append(op);
                county.append(op2);
            }else { 
                arr = data[capital.val()].city;
                for (let i=0;i<=arr.length-1;i++){ 
                    let op = $('<option value="' + i + '">' + arr[i].name + '</option>');
                    cit.append(op);
                }
                let b = arr[cit.val()].area;
                for (let i=0;i<=b.length-1;i++){ 
                    let op = $('<option value="' + i + '">' + b[i] + '</option>');
                    county.append(op);
                }
            }
        });
        //根据第二个点击来生成第三个select的option
        cit.change(() =>{ //城市改变
            county.empty();
            let b = arr[cit.val()].area;
            for (let i=0;i<=b.length-1;i++){ 
                let op = $('<option value="' + i + '">' + b[i] + '</option>');
                county.append(op);
            }
        })

这是我在学习js的时候做的一些小练习，我把它分享给大家，谢谢！

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax案例---实现级联列表

目录 Ajax案例---实现级联列表代码： select.html List.java 效果： -------------------- Ajax案例---实

痛定思痛。/ 2024年03月22日 17:21/ 0 赞/ 66 阅读

相关级联初始化-ajax

最近写页面，需要做业务线和业务的级联组件，并在页面打开就做好初始化。原来用的方案是每个初始化的方法返回一个Boolean类型的值，在方法调用处，用while循环判

冷不防/ 2023年08月17日 15:57/ 0 赞/ 129 阅读

相关 Ajax请求内嵌套Ajax请求的方法

前段时间做项目，需要把全国省市的两个XML文件整合成一个JSON格式的数据，手写的话觉得数据太多了，而且容易出错，于是就想到了用Ajax嵌套的方法来解决，就想平时用Ajax的方

男娘i/ 2023年06月05日 14:00/ 0 赞/ 366 阅读

相关 Ajax 请求方法 select 级联

一、创建Ajax let req = new XMLHttpRequest(); 二、发送请求 req.open('POST','asses/te

淩亂°似流年/ 2023年05月30日 06:08/ 0 赞/ 11 阅读

相关 jquery ajax 前后端通信传值（select 级联

好久没有写前端的东西了，原来的东西都忘了。从网上查了查资料，功能还是做出来了，总结一下吧。没准以后又忘了。目标：两个select级联,第二个option根据数据库

雨点打透心脏的1/2处/ 2022年10月01日 02:50/ 0 赞/ 172 阅读

相关 AJAX实现级联列表，入门级实现方式

直接贴代码吧，前台代码用js语言实现 <script type="text/javascript"> var xmlHttp; functio

我不是女神ヾ/ 2022年08月08日 19:56/ 0 赞/ 237 阅读

相关 Ajax实现级联

级联代码： //一级下拉框 var categoryLevel1 = $("categoryLevel1"); //拿到一级下拉框元素

秒速五厘米/ 2022年03月26日 02:40/ 0 赞/ 304 阅读

相关 ajax请求方法

ajax请求方法一： let url = ""; $.ajax({ url: url,

谁践踏了优雅/ 2021年10月23日 10:41/ 0 赞/ 405 阅读

相关 Thymeleaf select 使用和多select 级联选择

1.使用select 并且回绑数据; 页面：状态： <select name="status" th:field="{status}" id="idstatu

悠悠/ 2021年10月15日 09:12/ 0 赞/ 1130 阅读

相关用select2做级联下拉选择

用`select2`做级联下拉选择两个下拉框，通过选择年级下拉框进行查询该年级下的所有班级。 ![在这里插入图片描述][20200617151905155.png]

ゝ一世哀愁。/ 2021年06月26日 16:06/ 0 赞/ 734 阅读