JAVA EE 項目經常使用知識 之AJAX技術實現select下拉列表聯動的兩種用法（讓你真正理解ajax）

ajax 下拉列表聯動的用法。

ajax的定義：

 

AJAX 是一種用於建立快速動態網頁的技術。

經過在後臺與服務器進行少許數據交換，AJAX 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

 

ajax效果的一個例子：

 

區域爲空的時候，維護人狀況：

選了一個區域後的狀況：（選 舒城縣 聯帶出來的維護人員 小劉）

 

 

1、原生態的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" onchange="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的函數

}

2、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(){

}
});

}