ajax 下拉清單關聯的用法。
ajax的定義：
AJAX 是一種用于建立快速動态網頁的技術。
通過在背景與伺服器進行少量資料交換，AJAX 可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
ajax效果的一個例子：
區域為空的時候，維護人情況：
選了一個區域後的情況：（選 舒城縣 聯帶出來的維護人員 小劉）
一、原生态的js實作
XMLHttpRequest 是 AJAX 的基礎
XMLHttpRequest 對象
所有現代浏覽器均支援 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在背景與伺服器交換資料。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){//檢查浏覽器是否支援 XMLHttpRequest 對象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//不支援 建立
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//支援 直接new
}
}//建立一個xmlHttp 對象
function ajaxRequest(url,data,responseResult){//ajaxRequest是将請求發送到背景的function
createXMLHttpRequest();//調用 建立一個XMLHttpRequest對象
xmlHttp.open("POST",url,true);//規定請求的類型（post）、URL 以及是否異步處理請求（是）
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//類似HTML 表單那樣 POST 資料 的http頭
xmlHttp.onreadystatechange = responseResult;//規定在響應處于 onreadystatechange 事件中的就緒狀态時執行的函數
xmlHttp.send(data);//發送資料
}
//前台頁面的區域select代碼：
</td>
<th>區域：</th>
<td>
<select style="width: 152px" name="areaId" id="areaId" class="select_field" οnchange="getWhmans(this.value)">
<option value="" style="color:#999999">-請選擇-</option>
<c:forEach items="${arealist}" var="area" >
<option value="${area.id}">${area.areaName}</option>
</c:forEach>
</select><font color="red">*</font>
</td>
//前台維護人select頁面代碼：
<th>維護人員：</th>
<td>
<select id="whman" style="width: 152px" class="select_field" name="whman" >
<option value="" style="color:#999999">請選擇</option>
</select><font color="red">*</font>
</td>
//以下是背景的部分代碼
List<Whperson> customers = factoryBO.getFugBO().getWhperson(area);//根據區域來得到該區域下的維護人資訊 即選一個下拉框的區域後關聯另一個下拉框帶出該區域的維護人資訊
if (customers != null) {
JSONArray jsonArray = new JSONArray();//new一個json數組
for (Whperson whman : customers) {
JSONObject obj = new JSONObject();
obj.put("id", whman.getId());
obj.put("name", whman.getName());
jsonArray.add(obj);//循環new jsonObject 并把維護人資訊 put進去 再add到josnArray裡去
}
out.write(jsonArray.toString());//輸出寫到頁面 即下面的responseText裡面
} else {
out.write("null");
}
out.flush();
out.close();
function responseCustomer(){//背景響應完成後執行的function
if(xmlHttp.readyState == 4){//4表示請求已完成 ，響應已就緒
if(xmlHttp.status == 200){//表示ok
var message=xmlHttp.responseText;//為背景傳回過來的文本
if(message=="null"){//若沒有傳回任何資訊
document.getElementById("id").options.length=1;//把id='id'的option下拉框置空
return false;
}
var info2 = eval(message); //解析一下json字元串
document.getElementById("whman").options.length=1;把id='id'的option下拉框先置空
$.each(info2, function(i,n){
document.getElementById("whman").options.add(new Option(n.gridName,n.gridId));//給下拉框option加上背景傳回的值 即增加下拉框選項
});
}
}
}
function getGridByAreaId(val){//自己寫的函數 另一個option onchange事件觸發的函數,目的是選這個option後 想要的option能級聯
var url="village.do?method=getGridByAreaId";//請求背景的url
var data="id="+val.value;//傳入背景的參數
ajaxRequest(url,data,responseCustomer);//實質要調用的ajax的函數
}
二、Jquery ajax的實作
function getWhmans(obj){
var url="bbtj.do?method=getWhman";//請求背景的url
$("#whman").empty();//先置空
$("#whman").append($('<option value="">-請選擇-</option>'));//加上--請選擇--選項
if($(obj).val()=="")
return;//無值，傳回
url+="&areaId="+$(obj).val();//url參數
url+="&t="+(new Date()).valueOf();//url參數
$.ajax({
url:url,
type:'POST',//POST方式
dataType:'text',//傳回text類型
beforeSend:function(xmlHttpRequest,status){
},
success:function(data,status){
var d=eval(data);//解析
$(d).each(function(index,entity){
$("#whman").append($('<option value="'+entity['id']+'">'+entity['name']+'</option>'));//背景資料加到下拉框
});
},
complete:function(xmlHttpRequest,status){
},
error:function(){
}
});
}