집 >웹 프론트엔드 >JS 튜토리얼 >네이티브 javascript AJAX 3단계 연계 구현 코드

네이티브 javascript AJAX 3단계 연계 구현 코드

不言원래의: 2018-05-04 15:05:171325검색

이 글은 주로 네이티브 자바스크립트 AJAX 3단계 연결의 구현 코드를 소개합니다. 코드는 매우 훌륭하고 간단하며 이해하기 쉬우며 필요한 친구가 참조할 수 있습니다.

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(&#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>

네이티브 javascript AJAX 3단계 연계 구현 코드

관련 기사