html ajax级联源代码

HTML和Ajax级联源代码是一种常用的开发技术，用于异步交互与数据传输。下面是一个简单的HTML Ajax级联源代码实现示例：

//HTML代码label>
    请选择省份：select id="province" onchange="changeCity()">
    option value="">
    --请选择--/option>
    option value="1">
    北京/option>
    option value="2">
    上海/option>
    option value="3">
    浙江/option>
    /select>
    /label>
    label>
    请选择城市：select id="city">
    option value="">
    --请选择--/option>
    /select>
    /label>
//Ajax代码function changeCity(){
    var provinceId = document.getElementById("province").value;
if(provinceId!=""){
    var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
    var cities = JSON.parse(xhr.responseText);
    var citySelect = document.getElementById("city");
    citySelect.options.length = 1;
    for(var i=0;
    icities.length;
i++){
    var option = document.createElement("option");
    option.value = cities[i].id;
    option.text = cities[i].name;
    citySelect.add(option);
}
}
else{
    alert("无法获取城市列表");
}
}
}
    ;
    xhr.open("GET","/api/city/"+provinceId,true);
    xhr.send();
}
}
    

上述代码会在页面上动态生成两个下拉框，第一个下拉框用于选择省份，第二个下拉框则用于级联显示选中的省份下属的城市列表。当用户选择省份后，Ajax将根据用户选中的省份ID异步请求服务器，获取对应的城市列表数据，并将其解析后动态生成下拉框的选项。

以上就是HTML Ajax级联源代码的简单介绍，开发者可以根据实际需求进行更改和扩展。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！