【AJAX】回傳多個值

透過Ajax技術想要回傳多個值，可將資料轉換成XML方式或陣列方式回傳。本範例是採用陣列方式，把很多的資料用逗號區分存進陣列就可以使用了。

JavaScript :

 <script type="text/javascript"> 
        function pdata(str)
        {
        var xmlhttp;   
        if (str=="")
          {
           //隱藏span區塊
          document.getElementById("show").style.display="none";
          return;
          }
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
             document.getElementById("show").style.display='';  //show span區塊
             s=xmlhttp.responseText;
             var arrayStr=s.split(","); 
             document.getElementsByName("person")[0].value=arrayStr[0];   
             //判斷性別
             if (arrayStr[1]=='0')
             {
               //男
               document.getElementsByName("gender")[0].checked=true;
             }else{
               //女
               document.getElementsByName("gender")[1].checked=true;
             }
            
             document.getElementsByName("tel")[0].value=arrayStr[2];
             document.getElementsByName("city")[0].value=arrayStr[3]; 
            }
          }
        xmlhttp.open("GET","get_data.asp?q="+str,true);
        xmlhttp.send();
        }

  </script>

部分HTML :

編號 : <select name="PID" onchange="pdata(this.value)">
              <option value="">請選擇</option>
              <option value="A01">A01</option>
              <option value="A02">A02</option>
              <option value="A03">A03</option>
              <option value="A04">A04</option>
          </select>
<br /><br />
<span id="show" style='display:none;'>
姓名 : <input type="text" name="person" size="10" /><br />
電話 : <input type="text" name="tel" size="10" /><br />
性別 : <input type="radio" value="0" name="gender" />男 <input type="radio" value="1" name="gender" />女<br />
居住地 : <select name="city">
              <option value="">請選擇</option>
              <option value="台北">台北</option>
              <option value="台中">台中</option>
              <option value="台南">台南</option>
              <option value="高雄">高雄</option>
          </select>
</span>

ASP程式碼 :

<%
   response.CharSet ="utf-8"
   cname=Array("Jason", "Amy", "Jane", "Ken")
   gender=Array("0", "1", "1", "0")   '男:0 女：1
   tel=Array("2222-5555", "2288-5513", "9922-6855", "2222-5987")
   city=Array("高雄", "台中", "台南", "台北")
   i=right(request("q"),1) 
   response.Write(cname(i-1) & "," & gender(i-1) & "," & tel(i-1) & "," & city(i-1))
 %>

初始畫面：

點選畫面：

參考資源：
http://ray730727.pixnet.net/blog/post/6604604-%E7%95%B6%E4%BD%BF%E7%94%A8ajax%E5%9B%9E%E5%82%B3%E8%B3%87%E6%96%99%E5%BE%88%E5%A4%9A%E6%99%82
使用Ajax回傳多值資料