Ajax 实现级联菜单

Ajax 实现级联菜单

关键字: ajax 级联菜单

自己动手实现的一个Ajax级联菜单，开发平台：Eclipse，数据库：MySQL。数据库设计如下图所示：

1. 前台实现：

Html代码

1.<%@ page language="java"contentType="text/html; charset=UTF-8"

2.pageEncoding="UTF-8"%>

3.<%@ page import="java.sql.*,java.io.*"%>

4.

/TR/html4/loose.dtd">

5.

6.

7.

8.

9.

58.

59.

60.<%

61. //驱动器名

62. //数据库用户名和密码

63. String userName = "root";

64. String userPasswd = "1984428";

65. //需要连接的数据库名

66. String dbName = "studyajax";

67. //表名

68. String tableName = "articleType";

72. "jdbc:mysql://localhost:3306/" + dbName, userName,

73. userPasswd);

74. Statement statement = conn.createStatement();

75. String sql = "SELECT * FROM " + tableName + " where level=0";

76. ResultSet rs = statement.executeQuery(sql);

77.%>

78.

79. onchange="getLevel2()">

80.

请选择一级分类：

81. <%

82. while (rs.next()) {

83. %>

84.

<%=rs.getString(2)%>

85. <%

86. }

87. rs.close();

88. statement.close();

89. conn.close();

90. %>

91.

92.

请选择二级分类

93.

94.

95.

96.

2. 后台代码实现

Html代码

1.<%@ page language="java"contentType="text/html; charset=UTF-8"

2.pageEncoding="UTF-8"%>

3.<%@ page import="java.sql.*,java.io.*"%>

4.<%

5. //数据库用户名和密码

6. int id = Integer.parseInt(request.getParameter("id").trim());

7. //System.out.println("id:"+id);

8. String userName = "root";

9. String userPasswd = "1984428";

10. //需要连接的数据库名

11. String dbName = "studyajax";

12. //表名

13. String tableName = "articletype";

17. "jdbc:mysql://localhost:3306/" + dbName, userName,

18. userPasswd);

19. Statement statement = conn.createStatement();

20. String sql = "SELECT id, name FROM " + tableName

21. + " where level=1 and parentId=" + id;

22. //System.out.println("sql:"+sql);

23. ResultSet rs = statement.executeQuery(sql);

24.

25. //获取数据结果集

26. response.setContentType("text/html; charset=UTF-8");

27. response.setHeader("Cache-Control", "no-cache");

28. PrintWriter pout = null;

29. pout = response.getWriter();

30. pout.print("[");

31. while (rs.next()) {

32. try {

33.

34. pout.print("'" + (rs.getString("name")) + "',");

35. pout.print(rs.getString("id"));

36. pout.print(",");

37. } catch (Exception e) {

38. e.printStackTrace();

39. }

40. }

41. pout.print("0]");

42. rs.close();

43. statement.close();

44. conn.close();

45.%>