Ajax JavaScript select 级联

675 阅读2分钟

一、创建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的时候做的一些小练习,我把它分享给大家,谢谢!