ajax非同步請求資料，做下拉框聯動

ajax非同步請求資料，做下拉框聯動

 

▼

ajax代碼和js代碼：

 

var xmlhttp;
  function getData() {
       //擷取省的名稱
       var provinceName = $("#select1").val();
       //建立非同步呼叫對象
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        //載入要連結的頁面
     xmlhttp.Open("POST","NodeList.jsp?query=query&name=" +encodeURI(provinceName),true);
       //將對象狀態與事件相關聯
       xmlhttp.onreadystatechange=statechange;
       //發送請求
       xmlhttp.Send();
    }
  function statechange() {
   $("#select2").empty(); //清除下拉框option
       //判斷非同步呼叫是否已經完成
       if(xmlhttp.readystate==4) {
         //判斷完成的提示代碼是否是OK狀態
         if(xmlhttp.status==200) {
          if (xmlhttp.responseText!=""&&xmlhttp.responseText!=null) {
           var city = "";
           city = xmlhttp.responseText;
           var select2 = document.getElementByIdx_x("select2");
           var option= new Array(); //定義一數組
           var option2= new Array(); //定義一數組
           var option3= new Array(); //定義一數組
           option3=city.split("*"); //字元分割     
           option = option3[0].split(",");
           option2 = option3[1].split(",");
           for (var i = 0; i
            var opt=document.createElement_x("option");
            opt.value = option2[i];  //設定option的value
            opt.innerHTML=option[i]; //設定顯示給使用者看的值
            select2.appendChild(opt);
           }
          }

         }
       }
   }

 

java調用代碼：

List r = null;
     RegionService regionService = new RegionService();
     String query = request.getParameter("query");
     if ("query".equals(query)) {
      String arr ="";

      String arr2 = "";
      String name = new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8"); //請求編碼轉換
      if (!"".equals(name) && name!=null) {
        r = regionService.getRegionByName(name);
        for (int i=0; i
         arr += r.get(i).getCityName()+",";

         arr2 += r.get(i).getId()+",";

        }
      } 
      out.println(arr+"*"+arr2); //這裡很重要 
      return; //返回，如果是同一個頁面訪問的時候
     }

 

jsp代碼：

 

選擇省： 
    id="select1" onchange="getData();">
     請選擇省