suchen

Heim >Web-Frontend >js-Tutorial >Implementierungscode der dreistufigen Verknüpfung von nativem Javascript AJAX

Implementierungscode der dreistufigen Verknüpfung von nativem Javascript AJAX

不言
不言Original
2018-05-04 15:05:171321Durchsuche

In diesem Artikel wird hauptsächlich der Implementierungscode der nativen Javascript-AJAX-Dreiebenenverknüpfung vorgestellt. Der Code ist sehr gut, einfach und leicht zu verstehen und hat einen gewissen Referenzwert Dreistufige Verknüpfung. Der Implementierungscode lautet wie folgt: 


<!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(&#39;sel1&#39;)[0];
    var sel2 = document.getElementsByName(&#39;sel2&#39;)[0];
    var ints = document.getElementById(&#39;int&#39;);
    // 创建请求对象
    var a = new XMLHttpRequest();
    // 初始化
    a.open(&#39;get&#39;,&#39;city.json&#39;,&#39;true&#39;);
    // 发送
    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(&#39;option&#39;);
            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(&#39;option&#39;);
              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][&#39;市&#39;][sel2v][&#39;编码&#39;];
            ints.value = intsi;
          }
        }
      }
    }
  </script>
</body>
</html>

Verwandte Empfehlungen:

Detaillierte grafische Erläuterung von Ajax-Drei-Ebenen-Verknüpfung (mit Code) )


Das obige ist der detaillierte Inhalt vonImplementierungscode der dreistufigen Verknüpfung von nativem Javascript AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Als Komponente wird die Tableiste vue mint-ui verwendetNächster Artikel：Als Komponente wird die Tableiste vue mint-ui verwendet

In Verbindung stehende Artikel

Mehr sehen