JavaWeb使用ajax实现前后端代码分离的学生课表生成

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));
		}		
	}

好了，现在我们已经大功告成了，我们可以来看一下实际的效果