今天做了个小例子，用来通过异步来实现一个二级菜单中的数据从数据库中获取并绑定，它将数据库中的数据查询出来后添加到map对象中，通过json包将其打为json字符串返回给前台。有不足的地方请建议(#^.^#)
用到的资源有：
- jquery-3.3.1.min.js
- gson-2.2.4.jar
- mysql-connector-java-8.0.11.jar
因为用到了数据库，就先看一下这个例子的数据库吧，下面这是数据库转储后的代码
SET FOREIGN_KEY_CHECKS=0;
-- Table structure for first
DROP TABLE IF EXISTS `first`;
CREATE TABLE `first` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`text` varchar(20) NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=gb2312;
-- Records of first
INSERT INTO `first` VALUES ('1', '玩具');
INSERT INTO `first` VALUES ('2', '汽车');
INSERT INTO `first` VALUES ('3', '建筑');
INSERT INTO `first` VALUES ('4', '服饰');
INSERT INTO `first` VALUES ('7', '文具');
-- Table structure for second
DROP TABLE IF EXISTS `second`;
CREATE TABLE `second` (
`Id` int(11) NOT NULL AUTO_INCREMENT,
`text` varchar(20) NOT NULL,
`firstId` int(11) NOT NULL,
PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=gb2312;
-- Records of second
INSERT INTO `second` VALUES ('1', '小熊', '1');
INSERT INTO `second` VALUES ('2', '变形金刚', '1');
INSERT INTO `second` VALUES ('3', '奥迪', '2');
INSERT INTO `second` VALUES ('4', '帽子', '4');
INSERT INTO `second` VALUES ('5', '夹克', '4');
INSERT INTO `second` VALUES ('6', '牛仔裤', '4');
INSERT INTO `second` VALUES ('7', '钢笔', '7');
INSERT INTO `second` VALUES ('8', '毛笔', '7');
INSERT INTO `second` VALUES ('9', '圆珠笔', '7');
INSERT INTO `second` VALUES ('10', '彩笔', '7');这是这个例子的页面代码.
<body>
<br> 一级分类：
<select style="width: 100px" id="sel1">
<option value="null">--请选择--</option>
</select> 二级分类：
<select style="width: 100px" id="sel2">
<option value="null">--请选择--</option>
</select>
</body>这是javascript代码
<script type="text/javascript">
//只要DOM就绪就会执行，进行异步处理
$(document).ready(function(){
//声明一个全局变量，保存执行异步后获取的map对象
var FIRSTDATE = null;
$.ajax({
type: "GET",
url:"SecondaryLinkageServlet3",
dataType:"json",
success: function (firstdata) {
//将获取的值赋值给全局变量，因为这个返回的对象要在一级菜单改变时使用，
//所以需要扩大他的范围
FIRSTDATE = firstdata;
//输出打印
console.log(firstdata);
var grade=$("#sel1");
for(var key in firstdata){
//输出打印
console.log("属性：" + key + "====================");
//根据key去取值，获得List对象
var list = firstdata[key];
//遍历这个List对象
for(var j = 0; j < list.length; j++){
var obj = list[j];
//一会在下面控制器代码中可以看的出来，保存map对象时，
//一级菜单保存的key值为0
//二级菜单保存为0_...
if(key=="0"){
console.log(obj);
//添加一级下拉菜单
grade.append("<option value="+obj.id+">"+obj.text+"</option>");
}else{
console.log(obj);
}
}
}
},
error: function (firstdata) {
console.log("失败")
}
});
//一级菜单的改变事件
$("#sel1").change(function(){
var str = $("#sel1").val();
$("#sel2").empty();
$("#sel2").append("<option value='null'>--请选择--</option>");
if(str != "null"){
//遍历全局变量
for(var key in FIRSTDATE){
var list = FIRSTDATE[key];
for(var j = 0; j < list.length; j++){
var obj = list[j];
//判断并填充值
if(key!="0" && key=="0_"+ str){
//输出打印
console.log(obj);
//添加二级下拉菜单
$("#sel2").append("<option value="+obj.id+">"+obj.text+"</option>");
}
}
}
}
});
});
</script>在上述代码中，ajax通过’‘url:”SecondaryLinkageServlet3”，向控制器servlet发送请求，并声明获取的数据类型为json。
我们看一下控制器SecondaryLinkageServlet3.java的代码，在这里只贴doPost()方法中的代码，在这里，为了方便，没有做分层处理
/*protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
Connection conn = null;
//解决中文字符集问题
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
Map<String, List> map=new HashMap<String, List>();
List firstlist = new ArrayList();
// 连接数据库
conn = connbean.openConn();
// 执行查询查询一级列表内容
String firstsql = "SELECT * FROM first";
try {
PreparedStatement pstmt = conn.prepareStatement(firstsql);
ResultSet rs = pstmt.executeQuery();
while (rs.next()) {
First first = new First();
first.setId(rs.getInt("id"));
first.setText(rs.getString("text"));
firstlist.add(first);
}
map.put("0", firstlist);
// 根据外键Id执行查询查询一级列表内容
for(int i = 0; i < firstlist.size(); i++) {
First lirst = (First) firstlist.get(i);
int id = lirst.getId();
String secondsql = "SELECT * FROM second WHERE firstId = " + id;
PreparedStatement pstmtt = conn.prepareStatement(secondsql);
ResultSet rss = pstmtt.executeQuery();
List secondlist = new ArrayList();
while (rss.next()) {
Second second = new Second();
second.setId(rss.getInt("id"));
second.setText(rss.getString("text"));
secondlist.add(second);
}
map.put("0_"+id, secondlist);
}
} catch (SQLException e) {
e.printStackTrace();
}
// 关闭数据库连接
connbean.closeConn(rs, pstmt, conn);
System.out.println(map.toString());
// 输出返回
PrintWriter out = response.getWriter();
// 调用gson的方法将对象打为Json数据格式(字符串)
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
String firstdata = gson.toJson(map);
out.write(firstdata);// 这里括号中的参数是在页面中要获取的值，是同名的
}
*/到此，这个例子的代码就贴完了，下面我们看一下页面获取值的结果
说点题外话，我这里用到了mysql连接的比较高版本的jar包，所有连接串有一点改动
String url = "jdbc:mysql://localhost:3306/secondarylinkage?serverTimezone=GMT";
// 连接驱动,在老的版本中这个驱动是com.mysql.jdbc.Driver
Class.forName("com.mysql.cj.jdbc.Driver");
// 连接数据库
conn = DriverManager.getConnection(url, "root", "1");
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
