JavaWeb使用ajax实现前后端代码分离的学生课表生成
1. 先建立对应的数据库的表(student(Sno),course(Cno),SC(Sno,Cno))
其中Sno为学生的学号,也为student(学生表)的主键;Cno为课程的课程号,也为course(课程表)的主键;Sno,Cno为SC(选课表)的主键。
2. 创建数据表对应的java实体类
- Student类:
package webtask.model;
public class Student {
private String Sno;
private String Sname;
private String Ssex;
private int Sage;
private String Sdept;
private String Spwd;
public String getSno() {
return Sno;
}
public void setSno(String sno) {
Sno = sno;
}
public String getSname() {
return Sname;
}
public void setSname(String sname) {
Sname = sname;
}
public String getSsex() {
return Ssex;
}
public void setSsex(String ssex) {
Ssex = ssex;
}
public int getSage() {
return Sage;
}
public void setSage(int sage) {
Sage = sage;
}
public String getSdept() {
return Sdept;
}
public void setSdept(String sdept) {
Sdept = sdept;
}
public String getSpwd() {
return Spwd;
}
public void setSpwd(String spwd) {
Spwd = spwd;
}
}
- Course类
package webtask.model;
public class Course {
private String Cno;
private String Cname;
private String week;
private String jieci;
private String Croom;
private String tname;
private int Ccredit;
public String getCno() {
return Cno;
}
public void setCno(String cno) {
Cno = cno;
}
public String getCname() {
return Cname;
}
public void setCname(String cname) {
Cname = cname;
}
public String getWeek() {
return week;
}
public void setWeek(String week) {
this.week = week;
}
public String getJieci() {
return jieci;
}
public void setJieci(String jieci) {
this.jieci = jieci;
}
public String getCroom() {
return Croom;
}
public void setCroom(String croom) {
Croom = croom;
}
public String getTname() {
return tname;
}
public void setTname(String tname) {
this.tname = tname;
}
public int getCcredit() {
return Ccredit;
}
public void setCcredit(int ccredit) {
Ccredit = ccredit;
}
}
- SC类
package webtask.model;
public class SC {
private String Sno;
private String Cno;
private int Grade;
public String getSno() {
return Sno;
}
public void setSno(String sno) {
Sno = sno;
}
public String getCno() {
return Cno;
}
public void setCno(String cno) {
Cno = cno;
}
public int getGrade() {
return Grade;
}
public void setGrade(int grade) {
Grade = grade;
}
}
当然我们只为了完成课表的生成用不了这么多的属性,因为这是课表的生成只是一个小功能。
3. 创建数据表对应的数据访问dao层
我们这里只给出要用到的封装方法
- CourseDao类部分
//根据Cno查找课程信息
public Course find(String Cno)
{
Connection conn=null;
PreparedStatement stmt=null;
ResultSet rs=null;
try{
//发送sql语句
String zhidingselectsql="SELECT * FROM course where Cno ='"+Cno+"'";
//获取数据库连接
conn=MysqlHelper.getConnection();
//获取Statement对象
stmt=conn.prepareStatement(zhidingselectsql);
rs=stmt.executeQuery();
//处理结果集
while(rs.next())
{
Course cr=new Course();
cr.setCno(rs.getString("Cno"));
cr.setCname(rs.getString("Cname"));
cr.setCroom(rs.getString("Croom"));
cr.setJieci(rs.getString("jieci"));
cr.setTname(rs.getString("tname"));
cr.setWeek(rs.getString("week"));
cr.setCcredit(rs.getInt("Ccredit"));
return cr;
}
return null;
}catch(Exception e){
e.printStackTrace();
}finally{
MysqlHelper.release(conn, stmt,rs);
}
return null;
}
- SCDao类部分
//根据学号查找选课信息
public ArrayList<SC> find(String Sno)
{
Connection conn=null;
PreparedStatement stmt=null;
ResultSet rs=null;
ArrayList<SC> list=new ArrayList<SC>();
try{
//发送sql语句
String zhidingselectsql="SELECT * FROM sc where Sno ='"+Sno+"'";
//获取数据库连接
conn=MysqlHelper.getConnection();
//获取Statement对象
stmt=conn.prepareStatement(zhidingselectsql);
rs=stmt.executeQuery();
//处理结果集
while(rs.next())
{
SC sc=new SC();
sc.setCno(rs.getString("Cno"));
sc.setSno(rs.getString("Sno"));
sc.setGrade(rs.getInt("Grade"));
list.add(sc);
}
return list;
}catch(Exception e){
e.printStackTrace();
}finally{
MysqlHelper.release(conn, stmt,rs);
}
return null;
}
以上,我们的准备工作就已经做好了,接下来我们可以在前端发送ajax请求获取数据
4.前端向服务器发送ajax请求
- 我们先在js中封装好ajax请求数据的方法
function ajax(url,send,postback,f,moth)
{
if(!url)return;
moth=moth?"GET":"POST";
var ajx=new XMLHttpRequest();
ajx.open(moth,url,!f);
ajx.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
if(postback)ajx.onreadystatechange=function(){if(ajx.readyState==4&&ajx.status==200)postback(ajx.responseText)};
ajx.send(send)
}
- 前端调用ajax方法发送请求,并处理返回接收的数据
<div class="course-position">
<div class="course-bar">课表信息</div>
<table class="course-table">
<tr>
<td colspan="8">我的课表</td>
</tr>
<tr>
<th>节次/周次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td id="T1_0">第一节</td>
<td id="T1_1"></td>
<td id="T1_2"></td>
<td id="T1_3"></td>
<td id="T1_4"></td>
<td id="T1_5"></td>
<td id="T1_6"></td>
<td id="T1_7"></td>
</tr>
<tr>
<td id="T2_0">第二节</td>
<td id="T2_1"></td>
<td id="T2_2"></td>
<td id="T2_3"></td>
<td id="T2_4"></td>
<td id="T2_5"></td>
<td id="T2_6"></td>
<td id="T2_7"></td>
</tr>
<tr>
<td id="T3_0">第三节</td>
<td id="T3_1"></td>
<td id="T3_2"></td>
<td id="T3_3"></td>
<td id="T3_4"></td>
<td id="T3_5"></td>
<td id="T3_6"></td>
<td id="T3_7"></td>
</tr>
<tr>
<td id="T4_0">第四节</td>
<td id="T4_1"></td>
<td id="T4_2"></td>
<td id="T4_3"></td>
<td id="T4_4"></td>
<td id="T4_5"></td>
<td id="T4_6"></td>
<td id="T4_7"></td>
</tr>
<tr>
<td id="T5_0">第五节</td>
<td id="T5_1"></td>
<td id="T5_2"></td>
<td id="T5_3"></td>
<td id="T5_4"></td>
<td id="T5_5"></td>
<td id="T5_6"></td>
<td id="T5_7"></td>
</tr>
<tr>
<td id="T6_0">第六节</td>
<td id="T6_1"></td>
<td id="T6_2"></td>
<td id="T6_3"></td>
<td id="T6_4"></td>
<td id="T6_5"></td>
<td id="T6_6"></td>
<td id="T6_7"></td>
</tr>
</table>
</div>
<script type="text/javascript">
creatCourseTab();
</script>
function creatCourseTab()
{
var stusno=JSON.parse(getCookie("stu")).sno;
ajax("servlet/StuCourse","stusno="+stusno,postback);
function postback(x)
{
if(x=="no")
return;
else
{
var list = eval("("+x+")");
for(var i in list)
{
//解析json数据
var jieci=list[i].jieci;
var week=list[i].week;
var cno=list[i].cno;
var cname=list[i].cname;
var croom=list[i].croom;
var tname=list[i].tname;
switch(jieci)
{
case "第一节":jieci=1;break;
case "第二节":jieci=2;break;
case "第三节":jieci=3;break;
case "第四节":jieci=4;break;
case "第五节":jieci=5;break;
case "第六节":jieci=6;break;
}
switch(week)
{
case "星期一":week=1;break;
case "星期二":week=2;break;
case "星期三":week=3;break;
case "星期四":week=4;break;
case "星期五":week=5;break;
case "星期六":week=6;break;
case "星期日":week=7;break;
}
//确定单元格
var danyuange=document.getElementById("T"+jieci+"_"+week);
//写入数据
var content=cname+"("+cno+")"+"("+tname+")"+"<br>"+"("+croom+")";
danyuange.innerHTML=content;
danyuange.style.backgroundColor="rgb(148, 174, 243)";
}
}
}
}
5.后端servlet处理ajax请求
- 数据处理类StuCourse
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("utf-8");
//接收ajax数据
String stusno=request.getParameter("stusno");
//保存已选课程详细信息集合
ArrayList<Course> CourseList=new ArrayList<Course>();
SCDao scdao=new SCDao();
CourseDao coursedao=new CourseDao();
ArrayList<SC> SClist=new ArrayList<SC>();
SClist=scdao.find(stusno);
//判断find数据是否存在,存在,将详细信息添加到CourseList集合
if(SClist.size()<=0)
out.write("no");
else
{
for(int i=0;i<SClist.size();i++)
{
Course course=new Course();
course=coursedao.find(SClist.get(i).getCno());
if(course==null)
out.write("no");
else
CourseList.add(course);
}
//将CourseList集合转换为json
ObjectMapper mapper=new ObjectMapper();
out.write(mapper.writeValueAsString(CourseList));
}
}
好了,现在我们已经大功告成了,我们可以来看一下实际的效果