两级下拉条联动方式+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，保证中文的正确传输。