序
目的： 基于Mybatis动态获取数据库中的值展现在下拉框，下拉框选中并提交给后台选中内容，由后台进行处理。
正文
一、前端样式
参考：bootstrap-select举例
二、数据展现
（1）静态下拉框
方法一：直接定义
<form>
<div class="form-group">
<div id="left">
<select class="form-control">
<option value='1'>aaa</option>
<option value='2'>bbb</option>
<option value='3'>ccc</option>
</select>
</div>
</div>
</form>
方法二：JavaScript注入
<form>
<div class="form-group">
<div id="left">
<select class="form-control"></select>
</div>
</div>
</form>
<script type="text/javascript">
var result = [ "aaa", "bbbb", "ccc" ];
for (var i = 0; i < result.length; i++) {
$("#left select").append(
"<option value='"+i+"'>" + result[i] + "</option>");
}
</script>
（2）动态下拉框
数据库内容：
动态注入下拉框：
根据上述方法二扩展，从后端获取json值返回到result，
这里主要涉及：如何从后端获取json，
参考之前文章：SSM框架（五）jquery三种数据耦合方式【后端->值->前端】
最终效果：
具体方法：
- 前端jsp：
注意：get获取的json返回值为一个集合
<form>
<div class="form-group">
<div id="left2">
<select class="form-control"></select>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$.get(
"${basePath}teacher/getall.d",
function(arr){
for(var i = 0 ; i < arr.length;i++){
var newRow = "<option value="+arr[i].teacherId+">"+arr[i].teacherName+"</option>";
$("#left2 select").append(newRow);
}
}
);
});
</script>
- controller：（注意：这里返回的是list集合）
@RequestMapping("/getall")
public @ResponseBody List<TeacherInfo> getTeachers(){
try {
return teacherInfoService.findTeachers();
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
- service：
List<TeacherInfo> findTeachers() throws SQLException;
- serviceImpl：
这里用的Util配置，直连数据库查询，这里也可以配置到Mybatis中：
@Override
public List<TeacherInfo> findTeachers() throws SQLException {
String sql = "select * from teacher_info";
Connection con = DBManager.getConnection();
PreparedStatement pstm = con.prepareStatement(sql);
ResultSet rs = pstm.executeQuery();
List<TeacherInfo> teachers = new ArrayList<>();
while(rs.next()){
Integer teacherId = rs.getInt(1);
String teacherName = rs.getString(2);
String teacherNumber = rs.getString(3);
TeacherInfo t = new TeacherInfo();
t.setTeacherId(teacherId);
t.setTeacherName(teacherName);
teachers.add(t);
}
pstm.close();
con.close();
return teachers;
}
- Util配置：
package com.chinasofti.ssm01.util;
import java.sql.*;
public class DBManager {
private static final String URL = "jdbc:mysql://localhost:3306/file_server?useUnicode=true&characterEncoding=UTF-8";
private static final String USERNAME = "root";
private static final String PASSWORD = "wy123456";
private static final String CLASSNAME = "com.mysql.jdbc.Driver";
static{
try {
Class.forName(CLASSNAME);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection() throws SQLException{
Connection con = DriverManager.getConnection(URL, USERNAME, PASSWORD);
return con;
}
}
动态加载下拉框参考
三、获取下拉框选中传值到后端
这里主要涉及内容：获取下拉框选中值，并传值到后端
参考前面文章：SSM框架（二）四种控制器请求【前端->值->后端】
具体demo在：教师管理系统demo，这里就不重复了。
快速链接：SSM框架（九）Mybatis【多表查询-前后端】交互（教师管理系统demo）
