网络编程
位置：首页>> 网络编程>> JavaScript>> 原生javascript AJAX * 联动的实现代码

原生javascript AJAX * 联动的实现代码

作者：Cc_Pz　　发布时间：2024-04-18 10:00:46　

标签：javascript,ajax, , 联动

js * 联动的实现代码如下所示：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js原生ajax</title>
</head>
<body>
 <select name="sel1">
   <option value="" >-请选择 省/直辖市/自治区-</option>
 </select>
 <select name="sel2">
   <option value="" >-请选择 市-</option>
 </select>
 <input type="text" value="" id="int"/>
 <script>
   var sel1 = document.getElementsByName('sel1')[0];
   var sel2 = document.getElementsByName('sel2')[0];
   var ints = document.getElementById('int');
   // 创建请求对象
   var a = new XMLHttpRequest();
   // 初始化
   a.open('get','city.json','true');
   // 发送
   a.send();
   //readySate 状态码 交互进行到了哪一步
   //0：请求未初始化
   //1：服务器链接已建立
   //2：请求已经接受
   //3：请求处理中
   //4：请求已经完成，且响应已就绪
   //status 交互是否成功
   a.onreadystatechange = function(){
     if(a.status ==200||a.status == 304){
       if(a.readyState == 4){
         var obj = JSON.parse(a.response);//responseText:获得字符串形式的响应数据。
         var b = obj.城市代码;
         for(var i = 0;i<b.length;i++){
           var nOpt = document.createElement('option');
           var nOpt_t =document.createTextNode(b[i].省);
           nOpt.appendChild(nOpt_t);
           sel1.appendChild(nOpt);
           nOpt.value = i;
           console.log(ints.value)
         }
         sel1.onchange = function (){
           var index = sel1.selectedIndex;  //获取select选择的option的下标值
           var va = sel1.options[index].value//获取select第几个option的value值
           var city = b[va].市;    //获取他下边的市
           sel2.options.length = 1;  //清空所有的select下的option的值
           for(var i = 0;i<city.length;i++){
             var nOpt = document.createElement('option');
             var nOpt_t =document.createTextNode(city[i].市名);
             nOpt.appendChild(nOpt_t);
             sel2.appendChild(nOpt);
             nOpt.value = i;
             ints.value = "";
           }
         }
         sel2.onchange = function (){
           var sel1v = sel1.value;
           var sel2v = sel2.value;
           var intsi = b[sel1v]['市'][sel2v]['编码'];
           ints.value = intsi;
         }
       }
     }
   }
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的原生javascript AJAX * 联动的实现代码网站的支持！

来源：https://www.cnblogs.com/CcPz/archive/2018/05/03/8987663.html

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com