这个问题,搞了很久,不是难,而是乱七八糟的问题太多。
直接贴简洁的代码:
在<head>里增加Jquery的引用:
<script src="/jQuery/jquery.min.js"></script>
html部分:点击刷新课程时,将当前的“请选择”去除,并且新增N条记录作为可选项。
<form action="/AddStudentRecord" mothod="post">
<div>
<input type="button" onclick="ADDSelectOption()" value="刷新课程"><br/>
<label>课程1</label>
<select name="course1" id="course1" >
<option selected value="">请选择</option>
</select><br/>
<label>课程2</label>
<select name="course2" id="course2">
<option selected value="">请选择</option>
</select><br/>
</div>
<input type="submit" value="提交">
</form>
同一html页面的JS部分:使用ajax的方法增加下拉框,注意多用alert以及tomcat的输出框来判断程序走到ajax的哪一步了。
<script type="text/javascript">
/*这个方法用于在加载页面时读取后台并增加select的选择数*/
function ADDSelectOption()
{
//将两个下拉框清空
$("#course1").empty();
$("#course2").empty();
onLoadRead();
}
function onLoadRead()
{
var ajaxTimeOut=
$.ajax({
type:"post",
url:"/AddSR_ReadCourseName",
dataType:"json",
async:true,
cache:false,//不缓存
timeout:5000,
success:function(data)
{
if(data)
{
//测试返回数据的正确的使用形式,删除即可
// alert("测试:"+data[0].courseName);
// alert("测试2:"+data.length);
$("#course1").append("<option selected value=''>请选择</option>");
$("#course2").append("<option selected value=''>请选择</option>");
for(var i=0;i<data.length;i++)
{
$("#course1").append("<option selected value='"+data[i].courseName+"'>"+data[i].courseName+"</option>");
$("#course2").append("<option selected value='"+data[i].courseName+"'>"+data[i].courseName+"</option>");
}
alert("data.success 成功");
}
else {
alert("data.success 失败")
}
},
error:function ()
{
alert("数据传输失败!")
},
complete:function (XMLHttpRequest,status)
{
if(status=='timeout')
{
//如果请求超时,则弹出提示,并取消请求
alert("请求超时");
ajaxTimeOut.abort();
}
}
});
}
</script>
后台servlet返回数据的部分。分三块。
在使用前要导入6个jar包,可以直接在下载搜索,具体名单:
需引入JSON-lib包,JSON-lib包同时依赖于以下的JAR包:
1.commons-lang.jar
2.commons-beanutils.jar
3.commons-collections.jar
4.commons-logging.jar
5.ezmorph.jar
6.json-lib-2.2.2-jdk15.jar
这几个包是用来调用JSONArray的。论坛不能折叠代码我也是服了。
@WebServlet(name = "AddSR_ReadCourseName",value = "/AddSR_ReadCourseName")
public class AddSR_ReadCourseName extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
Course couseName = new Course();
ReceiveCourse RC = new ReceiveCourse();
ArrayList list = RC.getCourses();
//pack the list in jsonArray
if (list == null) {
request.setAttribute("error", list.getClass() + "读取为空,需要修改");
request.getRequestDispatcher("/Views/FailureOperaon.jsp").forward(request, response);
}
//转换
JSONArray jsonDocumentList = JSONArray.fromObject(list);
//这个输出可以在tomcat的输出框中显示取得的值,用于测试
System.out.println("【AddSR_ReadCourseName】最终得到结果:"+jsonDocumentList.toString());
out = response.getWriter();
out.println(jsonDocumentList);
out.flush();
out.close();
}
Course文件里是几个属性:id、name。直接private封装后get and set即可。
就不贴这个文件的代码了。
还有一个ReceiveCourse ,里面主要是来向mysql调用存储方法来获得返回数据的,返回结果为List形式。
public class ReceiveCourse {
public ArrayList getCourses() {
CallableStatement call = null;
ResultSet rs;
ArrayList arrayList = new ArrayList();
try {
Context context = new InitialContext();
Context envContext = (Context) context.lookup("java:comp/env/");
DataSource ds = (DataSource) envContext.lookup("jdbc/testDS");
Connection conn = ds.getConnection();
//upper part used to set up connection
call = conn.prepareCall("{call select_course_name_None}");
rs = call.executeQuery();
if (rs == null) {
// request.setAttribute("error", rs.getClass() + "读取为空,需要修改");
// request.getRequestDispatcher("/Views/FailureOperaon.jsp").forward(request, response);
arrayList = null;
} else {
while (rs.next()) {
Course course = new Course();
course.setCourseName(rs.getString(1));
arrayList.add(course);
}
}
rs.close();
call.close();
} catch (NamingException | SQLException e) {
e.printStackTrace();
}
return arrayList;
}
}
需求解决。