Maison >interface Web >js tutoriel >Code d'implémentation de liaison à trois niveaux javascript AJAX natif

Code d'implémentation de liaison à trois niveaux javascript AJAX natif

不言original: 2018-05-04 15:05:171321parcourir

Cet article présente principalement le code d'implémentation de la liaison à trois niveaux javascript AJAX natif. Le code est très bon, simple et facile à comprendre, et a une certaine valeur de référence. Les amis dans le besoin peuvent se référer à

js. liaison à trois niveaux. Le code de mise en œuvre est le suivant :

<!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>

Recommandations associées :

Explication détaillée. de graphique et de texte de liaison à trois niveaux ajax (code ci-joint)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：la barre d'onglets vue mint-ui est utilisée comme composantArticle suivant：la barre d'onglets vue mint-ui est utilisée comme composant

Articles Liés

Voir plus