兩級下拉條聯動方式+Ajax實現演算法

兩級下拉式功能表聯動方式：

也就是說，在第一級菜單當中指定了資訊，第二級下拉框當中的資訊為第一級下拉框的子物件。

1.      javascript

就是直接用javascript實現，加入一個changeCategory（）方法, 從伺服器返回一個字串。這個字串由伺服器查詢資料庫動態產生。和ajax的區別就是在於，不用XHR對象。直接使用的onchange傳值。

 

2.      ajax + 自訂字串

id + 名字，傳遞的是一個完整字串。通過“-”隔開每個記錄，然後在每個記錄當中通過“，”隔開id和名字。

for (int i=0;, i<childs.size(); i++){

Category c = childs.get(i);

buf.append(c.getId()+”,”+c.getName()+”-”);

}

         //刪掉最後一個沒有必要的”-”

buf.deleteCharAt(buf.length()-1);

parse（req.responseText）

然後到用戶端用，split來解析。注意，解析兩次，用兩個字元數組完成。第一次，用“-”split得到每一條記錄，然後用“，”得到id和名字。

 

 

 

3.      ajax + xml 最麻煩，效率也不高。

 

同樣需要迴圈，

for (int i=0;, i<childs.size(); i++){

Category c = childs.get(i);

buf.append(“<category> <id>”+ c.getId()+</id> <name> “+ c.getName() + ”</name></category>,”);

}

 

buff.insert (0, “<categories>”);

buff.append(</categories>)

 

然後到用戶端，用javascript解析。用tagbyname.

注意，這次在用戶端，不用parse（req.responseText）而需要使用parseXML(req.responseXML);

var categories = xml.getElementsByTagName(“msg”)[0];

 

for(var i=0; i<categories.childNodes.length, i++){

var category =categories[i];

 

在callback當中：

var msg =req.responseXML.getElementsByTagName(“msg”)[0];

setMsg(msg.childNodes[0].nodeValue);

 

xml需要在伺服器構建，並在客戶機需要解析。

javascrpt處理xml，就是tagname

 

 

4.      ajax+javascript代碼

也就說，這次傳遞過來的，不是xml，而是代碼。是直接把下拉式功能表的javascript代碼寫入到一個字串當中。其實和不使用ajax是一樣的，採用的是直接在服務端把代碼寫好，然後通過ajax把字串送到用戶端，直接執行。和第一種方法的區別，在於就是使用了ajax，說白了就是用了XHR對象來傳遞。其實沒什麼很大的區別。

只是注意，執行的時候需要用的方法為eval（req.resonseText）。

還有要注意的，就是需要在傳遞之前，要加上encoding，保證中文的正確傳輸。