Jsp数据库二级联动原理利用AJAX访问servlet来完成

数据库二级联动构思:利用AJAX访问servlet来完成

* 第一、父级列表由页面初始完成

* 并加上onchange="javascript:getData(this.value)"事件

* 注意：getData(obj)为AJAX访问servlet函数，具体见代码jslib/linkage.js

* 第二、在servlet中返回数据时，要求采用XML,如：

Java代码

复制代码

1.

2.String id = request.getParameter("id");

3. String str = "";

4. str = str + "";

5. String name = "";

6. if (id.trim().equals("1")){

7. name = "项目A";

8. } else if (id.trim().equals("2")){

9. name = "项目B";

10. }else if (id.trim().equals("3")){

11. name = "项目C";

12. }

13. for (int i = 0; i < 10; i++) {

14. //数据可以从数据库中读取

15. str = str + "

+ "\"/>";

16. }

17. str = str + "";

18. out.println(str);

19.

* 第三、在获取服务器返回有数据时，利用DOM重新设置子列表的所有内容

Javascript代码

复制代码

1.var messageNode = domObj.selectNodes("/Results");

2. var spanNode = document.getElementById("data");//用于存入列表的

span元素

3. var strText = "

">";

4. strText += "

请选择"

5.

6. if (messageNode.length > 0){

7. var subItem = messageNode[0].childNodes;

8. for(i=0;i

9. var item = subItem.item(i);//获取集合中的某一个元素对象

10. var strTemp = "

11. strTemp += item.getAttribute("id");

12. strTemp += "\">";

13. strTemp += item.getAttribute("value");

14. strTemp += "";

15. strText += strTemp

16. }

17. }

18. strText += "

"

19. //alert(strText);

20. // alert("源内容：" + spanNode.innerHTML);

21. spanNode.innerHTML = strText;

注：也可以加入事件onchange=\"javascript:show(this)，以响应联动出来的列表，可以处理用户的鼠标事件

复制代码

1.//这个方法将使用XMLHTTPRequest对象来进行AJA

X的异步数据交互

2.var xmlhttp;

3.function getDataById(id) {

4.// alert("进入AJAX调用函数中");

5. //1、使用dom的方式获取文本框中的值

6. // document.getElementById("userName")是dom中获

取元素节点的一种方法，

7. //一个元素节点对应HTML页面中的一个标签

ut>

8. // .value可以获取一个元素节点的value属性值

9.// var userName = document.getElementById("userNa

me").value;

10.

11.

12. //2.创建XMLHTTPRquest对象

13. //这是XMLHTTPRquest对象五步使用中最复杂的一

步

14. //需要针对IE和其它类的浏览器建立这个对象的不

同方式写不同的代码

15.

16. if (window.XMLHttpRequest) {

17. //针对FireFox, Mozillar, Opera, Safari, IE7, IE8

18. xmlhttp = new XMLHttpRequest();

19. //针对某些特定版本的mozillar浏览器的BUG进

行修正

20. if (xmlhttp.overrideMimeType) {

21. xmlhttp.overrideMimeType("text/xml");

22. }

23. } else if (window.ActiveXObject) {

24. //针对IE6，IE5.5, IE5

25. //两个可以用于创建XMLHTTPRequest对象的控

件名称，保存在一个js的数组趾

26. //用前面的版本较新

27. var activexName = ["MSXML2.XMLHTTP", "Mi

crosoft.XMLHTTP"];

28. for (var i = 0; i < activexName.length; i++) {

29. try {

30.//取出一个控件名称进行创建，如果创建成功

就终止循环

31.//如果创建失败，会抛出异常，然后可以继续

循环，继续尝试创建

32.xmlhttp = new ActiveXObject(activexName

[i]);

33. } catch (e) {

34. }

35. }

36. }

37.

38. //确认XMLHTTPRequest对象创建成功