用Ajax，json，MYSQL，前端后端语言创建一个学生管理系统吧~~

都是些老物件

已于 2022-11-06 16:10:37 修改

阅读量1.1k

点赞数 10

分类专栏：前端文章标签：前端后端 mysql json ajax

于 2022-05-14 17:49:19 首次发布

本文链接：https://blog.csdn.net/qq_57390446/article/details/124762311

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

像是许久未发文了，竟惊喜于百忙之中得以抽身。如不嫌弃，让心静上一静，听我叙上一叙这次的实践成果吧。

设计难题及解决方案（当然了，这是我的思考过程，并不是最佳）

如何分配好前端四个功能模块布置

我用的是HTML框架思想解决的。众所周知多个框架虽然可以集中在同一个页面上，但它们都是相互独立的个体，每一个框架相当于一个页面，即对应于一份HTML代码。所以其中的src属性是必须要设置的，它的属性值是一份HTML代码的绝对地址或者是相对地址。frameset取代body并对页面进行框架分割或者iframe在body中占用一个地方形成一个框架。所以利用框架的思想我就能在一个浏览器上显示多个页面，就不需要用页面切换来实现功能模块切换了。

既然是数据管理系统的一种，那么前后端如何交互这些结构复杂的数据呢

可以使用json作为数据的交换格式。json起源于JavaScript，是对象与数组的另外一种表现形式。而由json语法构造出来的对象和数组大抵都是由key-value键值对组成的。如在json中，对象的写法为{key1:value1，key2:value2……},仔细一看这种结构，是不是发现和Java里面的Map集合封装数据的结构是一样的。再看看json里面数组的语法为[e1,e2……],是不是发现和Java里面的List集合封装数据的结构是一样的。既然如此，我们来看看这种json数组 [{key1:value1，key2:value2……},{key1:value3，key2:value4……}……],数组的元素是json对象，那这是不是又对应着Java里的List集合里封装的是Map集合对象呢？说到这，我们体会到了这种潜在的联系，那如何利用它呢？Java里面提供了json的对应支持包——commons-beanutils-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5(1).jar，commons-logging.jar，ezmorph-1.0.3.jar，json-lib-2.1-jdk15.jar。有了这些包，前后端就可以利用json进行数据交换了。例如在后端我先建立一个List集合，并封装数据进去，然后利用JSONArray类的fromObject(List a)方法将该List集合转换成json字符串，并发送给前端。前端收后，用JavaScript 的JSON.parse()对接收数据进行反序列化，最终得到可以利用的json数组。

后端发送json

String classname=request.getParameter("classname");
ArrayList<HashMap<String,String>> Buffer=manager.getBuffer(classname);
//manager.getBuffer(classname)这是我自己定义的一个类和方法，目的是获取一个
//ArrayList集合，泛型约束为HashMap<String,String>
if(Buffer.size()==0)
{HashMap<String,String> element=new HashMap<>();
 element.put("id","无该班级编号");
 element.put("classname", "无该班级信息");
 element.put("classinfo", "无该班级描述");
 Buffer.add(element);}
 JSONArray jsonarray=JSONArray.fromObject(Buffer);//将List集合转化成json数组字符串形式
 response.setContentType("text/html;charset=UTF-8");
 response.getWriter().println(jsonarray);//发送[{key1:value1，key2:value2……},{key1:value3，key2:value4……}……]形式的json字符串

前端处理json

var classequery = document.getElementById("classequery");
			while(classequery.rows.length>0){
				classequery.deleteRow(classequery.rows.length-1);
			}
            var txt=JSON.parse(XMLHttpReq.responseText);//得到
//[{key1:value1，key2:value2……},{key1:value3，key2:value4……}……]格式的json数组
            for(var i=0 , len = txt.length ;i< len ; i++){
            	var tr = classequery.insertRow(i);
            	var cell0 = tr.insertCell(0);            	
            	cell0.innerHTML = txt[i].id;
            	var cell1 = tr.insertCell(1);
            	cell1.innerHTML = txt[i].classname;
            	var cell2 = tr.insertCell(2);
            	cell2.innerHTML = txt[i].classinfo;
            }

假设txt=[{key1:value1，key2:value2……},{key1:value3，key2:value4……}……] 则txt[0].key1为value1 ，txt[1].key2为value4

前端涉及到更为复杂的数据展现结构，需要匹配到更为繁琐的JavaScript动态操作节点

<1>表格结构—table ：由行和列交错组成，从而形成一个个单元格。可以设置子节点thead，表示表头，设置子节点tbody，表示表主体。在JavaScript动态操作节点中，table对应于两个数组，数组rows[i]表示第i行，cells[j]表示第几列，通过组合使用rows[i].cells[j]就可以引用到对应几行几列的单元格了，进而获取单元格里的数据。

var id=document.getElementById("studentequery").rows[0].cells[0].innerHTML;
//其中studentequery为table子节点tbody的id名。通过这条语句，就把tbody中第一行与
//第一列交叉的那个单元格里的数值赋给了id。注意：下标是从0开始的，即下标0代表第一行

那么如何创建单元格呢？先用insertRow(i)在i行创建一个行，然后再用insertCell(j)依次给该行创建单元格。

var classequery = document.getElementById("studentequery");//获取tbody节点的对象
			while(classequery.rows.length>0){//rows代表tbody里的行
				classequery.deleteRow(classequery.rows.length-1);//删去行-deleteRow(第几行)
			}
            var txt=JSON.parse(XMLHttpReq.responseText);
            for(var i=0 , len = txt.length ;i< len ; i++){
            	var tr = classequery.insertRow(i);//创建一个行对象
            	var cell0 = tr.insertCell(0);//用行对象进而创建一个单元对象            	
            	cell0.innerHTML = txt[i].id;           	
            	var cell1 = tr.insertCell(1);
            	cell1.innerHTML = txt[i].studentname;            	
            	var cell2 = tr.insertCell(2); 
            	cell2.innerHTML = txt[i].studentindex;            	
            	var cell3 = tr.insertCell(3);            	
            	cell3.innerHTML = txt[i].studentsex;            	
            	var cell4 = tr.insertCell(4);
            	cell4.innerHTML = txt[i].department;
              	var cell5 = tr.insertCell(5);
            	cell5.innerHTML = txt[i].studentclass;            	
            	var cell6 = tr.insertCell(6);            	
            	cell6.innerHTML = txt[i].location;            	
            }

<2>下拉框—select：select的子节点是option，可直接用document.createElement("option")创建

var studentclass = document.getElementById("studentclass");//studentclass为select的id名
			var options=JSON.parse(XMLHttpReq.responseText);
			for(var i=0;i<options.length;i++){
				var opt = document.createElement("option");//得到<option></option>
				opt.innerHTML = options[i];//得到<option>(这里为options[i]的值)</option>
				studentclass.appendChild(opt);

引用select子节点option的值

var studentclass1 = document.getElementById("studentclass");
	var sid=studentclass1.selectedIndex;//selectedIndex属性为下拉框被选中的选项索引
	var studentclass=studentclass1[sid].innerText;//获取被选中选项的值

<3>单选框-radio：

性别:&nbsp;&nbsp;&nbsp;男<input type="radio" value="男" name="studentsex">
&nbsp;&nbsp;&nbsp;女<input type="radio" value="女" name="studentsex">

利用checked属性获取radio被选中的值

var radio = document.getElementsByName("studentsex");//通过节点name属性获取对象
//所有的radio的name属性值都相同，所以这里获得了一个元素为radio对象的数组
	for (i=0; i<radio.length; i++) {
		if (radio[i].checked) {//单选框里被选中的radio选项的checked属性为true
			var studentsex=radio[i].value;
		}
	}

JDBC中需要用到的SQL语句也会更丰富

select * from messageLibrary where username=? order by id DESC limit 1;
//先查询出某个username的所有记录，对查询出来的结果按照字段id
降序排列(即从大到小排列),然后用limit限定查询出的记录数,后面的数字即为输出的记录数。命令的
总体功能就是：查询出某个username的最后一条记录.其中主键id必须是int类型,且要用 auto-increment修饰(自动加一)

update class set classname=?,classinfo=? where id=?;//set后面写入需
要修改的字段以及对应的修改值。where后面的条件不能使用需要进行修改的字段

insert into class (classname,classinfo) values(?,?);
//第一个括号指定需要插值的字段，第二个括号为插入的值，class
表中有一个主键id(int)，因为用了auto-increment修饰，不给它插
值时,它会自动加一

总结一下过程中我遇到的一些细节问题

在Java中，每一个{}对应一个作用域，在大括号镶嵌结构中，在位于最里面的{}里定义的变量作用域最小，并列的{}里的变量作用域互不干扰。
Ajax中用send发送数据时，注意不要多打空格符。不然你的键名可能会改变，因为粗心，在键名后面多打了一个空格符

登录效果&&主页切换效果

功能展示效果

servlet代码

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.json.JSONArray;
@WebServlet("/Controller")
public class Controller extends HttpServlet {
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Controller() {
        super();}
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		String task=request.getParameter("task");
		if(task.equals("1"))//添加班级信息响应
		{String classname=request.getParameter("classname");
		String classinfo=request.getParameter("classinfo");						
		response.setContentType("text/html;charset=UTF-8");
		if(!classname.equals("") && !classinfo.equals(""))			
		{manager.addclass(classname, classinfo);
		response.getWriter().println("😊添加成功😊");}
		else {response.getWriter().println("😒输入不能为空哦😊");}
}
		if(task.equals("2")) {//查询班级信息响应
			String classname=request.getParameter("classname");
			ArrayList<HashMap<String,String>> Buffer=manager.getBuffer(classname);
			if(Buffer.size()==0)
			{HashMap<String,String> element=new HashMap<>();
	    	element.put("id","无该班级编号");
	    	element.put("classname", "无该班级信息");
	    	element.put("classinfo", "无该班级描述");
	    	Buffer.add(element);}
			JSONArray jsonarray=JSONArray.fromObject(Buffer);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(jsonarray);
		}
		if(task.equals("3")) {//修改班级信息响应
			String classname=request.getParameter("classname1");
			String classinfo=request.getParameter("classinfo");
			String id=request.getParameter("classindex");
			manager.modify(Integer.parseInt(id), classname, classinfo);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println("修改成功");
		}
		if(task.equals("4")) {//删除班级信息响应
			String id=request.getParameter("classindex");
			manager.cutoff(Integer.parseInt(id));
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println("删除成功");
		}
		if(task.equals("5")) {//给前端页面的下拉框初始化选项值(classname)
			ArrayList<String> Buffer=manager.getclassname();
			JSONArray jsonarray=JSONArray.fromObject(Buffer);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(jsonarray);
		}
		if(task.equals("6")) {//添加学生信息响应
			String studentname=request.getParameter("studentname");
			String studentindex=request.getParameter("studentindex");
			String studentsex=request.getParameter("studentsex");
			String department=request.getParameter("department");
			String studentclass=request.getParameter("studentclass");
			String location=request.getParameter("location");
			response.setContentType("text/html;charset=UTF-8");
			if(!studentname.equals("") && !studentindex.equals("") && !department.equals("") && !location.equals(""))
			{manager.addstudent(studentname, studentindex, studentsex, department, studentclass, location);
			response.getWriter().println("添加成功");}
		    else {
		    response.getWriter().println("输入不能为空哦");
		}}
		if(task.equals("7")) {//查询学生信息响应
			String studentname=request.getParameter("studentname");
			String studentindex=request.getParameter("studentindex");
			ArrayList<HashMap<String,String>> Buffer=manager.getBuffer(studentname, studentindex);
			if(Buffer.size()==0)
			{HashMap<String,String> element=new HashMap<>();
			element.put("id","无该学生编号");
	    	element.put("studentname","无该学生姓名");
	    	element.put("studentindex","无该学生学号");
	    	element.put("studentsex","无该学生性别");
	    	element.put("department","无该学生所属学院");
	    	element.put("studentclass","无该学生所属班级");
	    	element.put("location","无该学生家庭地址");
	    	Buffer.add(element);}
			JSONArray jsonarray=JSONArray.fromObject(Buffer);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println(jsonarray);
		}
		if(task.equals("8")){//删除学生信息响应
			String studentname=request.getParameter("studentname");
			String studentindex=request.getParameter("studentindex");
			manager.cutoff(studentname, studentindex);
			response.setContentType("text/html;charset=UTF-8");
			response.getWriter().println("删除成功");
		}
		if(task.equals("9")) {//修改学生信息响应
			String id=request.getParameter("id");
			String studentname1=request.getParameter("studentname1");
			String studentindex1=request.getParameter("studentindex1");
			String studentsex=request.getParameter("studentsex");
			String department=request.getParameter("department");
			String studentclass=request.getParameter("studentclass");
			String location=request.getParameter("location");
			response.setContentType("text/html;charset=UTF-8");
			if(!department.equals("") && !location.equals(""))
			{manager.modify(Integer.parseInt(id), studentname1, studentindex1, studentsex, department, studentclass, location);
			response.getWriter().println("修改成功");}
		    else {
		    response.getWriter().println("输入不能为空哦");
		}}}	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

JDBC代码

import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import com.mysql.cj.xdevapi.Statement;
class manager {
	static private String driver="com.mysql.cj.jdbc.Driver";//数据库驱动类所对应的字符串
	static private String URL="jdbc:mysql://localhost:3306/mydatabase?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8";
            //URL语法格式如下
	//jdbc:mysql:是固定的写法，后面跟主机名localhost，3306是默认的MySQL端口号
	//serverTimezone=UTC是指定时区时间为世界统一时间
	//useUnicode=true是指是否使用Unicode字符集，赋值为true
	//characterEncoding=utf-8是指定字符编码格式为UTF8
	static private Connection cnt=null;
	
	static void initConnection() {//建立与数据库的连接
		try {
			Class.forName(driver);
			cnt=DriverManager.getConnection(URL,"root","941593760s");
	}
			catch(SQLException e) {
				e.printStackTrace();
			}
			catch(ClassNotFoundException e) {
				e.printStackTrace();}
			catch(Exception e) {
				e.printStackTrace();
			}}
static void addmsg(String username,String password) {//添加注册信息		
		if(cnt==null) {
			initConnection();
		}
		
		try{
			PreparedStatement ps=cnt.prepareStatement("insert into user values(?,?)");			
			ps.setString(1, username);
			ps.setString(2, password);
		    ps.executeUpdate();
			}
		catch(SQLException e) {
			e.printStackTrace();
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		
	}

	static void addclass(String classname,String classinfo) {//添加班级信息			
	if(cnt==null) {
		initConnection();
	}
		try{
			PreparedStatement ps=cnt.prepareStatement("insert into class (classname,classinfo) values(?,?)");			
			ps.setString(1, classname);
			ps.setString(2, classinfo);
		    ps.executeUpdate();
			}
		catch(SQLException e) {
			e.printStackTrace();
		}
		catch(Exception e) {
			e.printStackTrace();
		}
		
	}
	static boolean examinationDL(String username,String password) {//检验登录信息(密码与用户名)是否正确		
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("select * from user where username=? and password=?"))			
			{ps.setString(1, username);
			ps.setString(2, password);
		    ResultSet rs=ps.executeQuery();
		    if(rs.next()) {
		    	return(true);}//登录成功		   
			}		
		catch(Exception e) {
			e.printStackTrace();
		}
		return(false);
	}
	static boolean examinationZC(String username) {	//检验注册所用的用户名是否有重复	有重复返回false 无则返回true
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("select * from user where username=?"))			
			{ps.setString(1, username);			
		    ResultSet rs=ps.executeQuery();
		    if(rs.next()) {
		    	return(false);}//有重复的的名称，请重新注册(保证数据库里面的用户名唯一)		   
			}		
		catch(Exception e) {
			e.printStackTrace();
		}
		return(true);
	}
	static ArrayList<HashMap<String,String>> getBuffer(String classname) {//以集合的形式返回班级信息，用于JSON数据交换
		if(cnt==null) {
			initConnection();
		}
		ArrayList<HashMap<String,String>> Buffer=new ArrayList<>();//在方法里面创建对象，保证线程并发安全
		try(
				PreparedStatement ps=cnt.prepareStatement("select * from class where classname=?"))			
				{		ps.setString(1, classname);					   
			ResultSet rs=ps.executeQuery();
			    while(rs.next()) {	
			    	HashMap<String,String> element=new HashMap<>();//java中Map形式的数据集合对应json语法里的对象形式，即{e1，e2……}
			    	element.put("id", rs.getInt("id")+"");
			    	element.put("classname", rs.getString("classname"));
			    	element.put("classinfo", rs.getString("classinfo"));
			    	Buffer.add(element);//将Map集合作为List的元素，这种形式的集合对用于json中用数组封装集合的写法，即[{e1，e2……},{e1，e2……}……]
			    	}		   
				}		
			catch(Exception e) {
				e.printStackTrace();
			}
			return(Buffer);
	}
	static ArrayList<HashMap<String,String>> getBuffer(String studentname,String studentindex) {//以集合的形式返回学生信息，用于JSON数据交换
		if(cnt==null) {
			initConnection();
		}
		ArrayList<HashMap<String,String>> Buffer=new ArrayList<>();//在方法里面创建对象，保证线程并发安全
		try(
				PreparedStatement ps=cnt.prepareStatement("select * from student where studentname=? and studentindex=?"))			
				{		ps.setString(1, studentname);
				        ps.setString(2, studentindex);
			    ResultSet rs=ps.executeQuery();
			    if(rs.next()) {	
			    	HashMap<String,String> element=new HashMap<>();
			    	element.put("id", rs.getInt("id")+"");
			    	element.put("studentname", rs.getString("studentname"));
			    	element.put("studentindex", rs.getString("studentindex"));
			    	element.put("studentsex", rs.getString("studentsex"));
			    	element.put("department", rs.getString("department"));
			    	element.put("studentclass", rs.getString("studentclass"));
			    	element.put("location", rs.getString("location"));
			    	Buffer.add(element);
			    	}		   
				}		
			catch(Exception e) {
				e.printStackTrace();
			}
			return(Buffer);
	}
	static void withdraw(String username) {//撤回消息
		if(cnt==null) {
			initConnection();
		}
		try(	PreparedStatement ps1=cnt.prepareStatement("select * from messageLibrary where username=? order by id DESC limit 1");//按照字段id降序
				//排列(即从大到小排列),然后用limit限定查询出的记录数,后面的数字即为输出的记录数。命令的总体功能就是——查询出最后一条记录。其中主键id要用 auto-increment修饰(自动加一)
				PreparedStatement ps2=cnt.prepareStatement("delete from messageLibrary where id=?"))			
				{		 ps1.setString(1, username);
			            ResultSet rs=ps1.executeQuery();
				        if(rs.next()) {
				        	int id=rs.getInt("id");
				        	ps2.setInt(1, id);
				        	ps2.executeUpdate();
				        }
			    	}		   
					
			catch(Exception e) {
				e.printStackTrace();
			}
	}
	static void modify(int id,String classname,String classinfo) {//根据唯一的编号，修改班级记录
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("update class set classname=?,classinfo=? where id=?"))//where后面的条件不能使用需要进行修改的字段			
			{ps.setInt(3, id);
			ps.setString(1, classname);
			ps.setString(2, classinfo);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void modify(int id,String studentname1,String studentindex1,String studentsex,String department,String studentclass,String location) {
		//根据学生id(编号)修改学生信息
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("update student set studentname=?,studentindex=?,studentsex=?,"
					+ "department=?,studentclass=?,location=? where id=?"))			
			{
			ps.setString(1, studentname1);
			ps.setString(2, studentindex1);
			ps.setString(3, studentsex);
			ps.setString(4, department);
			ps.setString(5, studentclass);
			ps.setString(6, location);			
			ps.setInt(7, id);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void cutoff(String studentname,String studentindex) {//根据学生姓名和学号删除学生记录
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("delete from student where studentname=? and studentindex=?"))			
			{ps.setString(1, studentname);
			ps.setString(2, studentindex);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void cutoff(int id) {//根据编号删除班级记录
		if(cnt==null) {
			initConnection();
		}
		try(
			PreparedStatement ps=cnt.prepareStatement("delete from class where id=?"))			
			{ps.setInt(1, id);
			ps.executeUpdate();}		  		   	
		catch(Exception e) {
			e.printStackTrace();
		}		
	}
	static void addstudent(String studentname,String studentindex,String studentsex,String department,String studentclass,String location) {//添加学生信息
		if(cnt==null) {
			initConnection();
		}
			try{
				PreparedStatement ps=cnt.prepareStatement("insert into student (studentname,studentindex,studentsex,department,"
				+ "studentclass,location) values(?,?,?,?,?,?)");			
				ps.setString(1, studentname);
				ps.setString(2, studentindex);
				ps.setString(3, studentsex);
				ps.setString(4, department);
				ps.setString(5, studentclass);
				ps.setString(6, location);
			    ps.executeUpdate();
				}
			catch(SQLException e) {
				e.printStackTrace();
			}
			catch(Exception e) {
				e.printStackTrace();
			}}
	static ArrayList<String> getclassname() {
		if(cnt==null) {
			initConnection();
		}
		ArrayList<String> Buffer=new ArrayList<String>();
		try(
			PreparedStatement ps=cnt.prepareStatement("select * from class"))			
			{ResultSet rs=ps.executeQuery();		
		while(rs.next()) {
			Buffer.add(rs.getString("classname"));
		}}
		catch(Exception e) {
			e.printStackTrace();
		}
		return(Buffer);}}

前端部分代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生查询部分</title>
</head>
<body onload="init();" style="background-image: url(1.gif);
             background-repeat: no-repeat; 
             background-attachment: fixed; 
             background-size: 100% 100%;">
<style type="text/css">
.place1{position:absolute;
            top:30px;
            left:150px;
            height:200px;
            box-shadow: 0px 0px 20px #F7ACBC;
            border-radius:30px;
            border:solid 2px #F7ACBC;
}
.place2{position:absolute;
            top:30px;
            left:400px;
            height:80px;
      
}
.place3{position:absolute;
            top:150px;
            left:410px;          
}
.place4{position:absolute;
            top:150px;
            left:610px;          
}
.bu{             
	    background-color:#6C6C6C;
	    box-shadow:0 0 1px #272727,
                    0px 0px 10px 2px #3C3C3C,
                    0px 0px 10px  4px #4F4F4F;
	    width:80px;          	    
	    border:0;
	    font-size: 16px;		
                    border-radius: 30px;
                
            } 
.bu:hover{
background-color:#6698FF;
transition-property:background-color;
}
.bu:active{
width:90px;
transition-property:width;
}
.student{       
            width: 150px;
            height: 20px;
            border-radius:50px;
            background-color:#81C0C0;
            border-width: 2px 2px 2px 2px;
            border-color:black;}
.student:focus{
background-color:#4EFEB3;
}
*{font-style:italic;
font-weight:200;
font-family:\6977\4F53_GB2312;
color:white;
}</style>
<script type="text/javascript">
var XMLHttpReq;
function createXML(){
	if(window.XMLHttpRequest)
		// DOM 2 浏览器
		{XMLHttpReq = new XMLHttpRequest();}
		else if(window.ActiveXObject)
		{//1 IE 浏览器
		try
		{XMLHttpReq= new Activexobject("Msxm12.XMLHTTP");}
		catch(e)
		{try
		{XMLHttpReq = new ActivexObject("Microsoft.XMLHTTP")}
		catch(e){}
		}}//在考虑不同浏览器的兼容问题下，创建一个XMLHttpRequest对象
}
function init(){//添加onload事件，初始化下拉框的选项
	createXML();
	XMLHttpReq.open("post","Controller",true);// 通过open()方法取得与服务器的连接，发送POST请求
	XMLHttpReq.setRequestHeader("Content-Type",
	"application/x-www-form-urlencoded");// 设置请求头-发送 POST 请求时需要该请求头
	XMLHttpReq.onreadystatechange = processResponse;// 指定 XMLHttpRequest 状态改变时的处理函数
	XMLHttpReq.send("task="+5);	
}
function processResponse(){
	if(XMLHttpReq.readyState == 4){
		if(XMLHttpReq.status == 200){
			var studentclass = document.getElementById("studentclass");
			var options=JSON.parse(XMLHttpReq.responseText);
			for(var i=0;i<options.length;i++){//下拉框里面的选项在js中是以数组形式存在的，所以在动态创建时也要以数组形式创建
				var opt = document.createElement("option");
				opt.innerHTML = options[i];
				studentclass.appendChild(opt);
			}                         
	}
}}
function sendrequest(){
	var studentname = document.getElementById("studentname").value;	
	var studentindex = document.getElementById("studentindex").value;
	createXML();
	XMLHttpReq.open("post","Controller",true);// 通过open()方法取得与服务器的连接，发送POST请求
	XMLHttpReq.setRequestHeader("Content-Type",
	"application/x-www-form-urlencoded");// 设置请求头-发送 POST 请求时需要该请求头
	XMLHttpReq.onreadystatechange = processResponse1;// 指定 XMLHttpRequest 状态改变时的处理函数
	XMLHttpReq.send("studentname="+studentname+"&task="+7+"&studentindex="+studentindex);	
}
function sendrequest1(){
	var studentname = document.getElementById("studentname").value;	
	var studentindex = document.getElementById("studentindex").value;
	createXML();
	XMLHttpReq.open("post","Controller",true);// 通过open()方法取得与服务器的连接，发送POST请求
	XMLHttpReq.setRequestHeader("Content-Type",
	"application/x-www-form-urlencoded");// 设置请求头-发送 POST 请求时需要该请求头
	XMLHttpReq.onreadystatechange = processResponse2;// 指定 XMLHttpRequest 状态改变时的处理函数
	XMLHttpReq.send("studentname="+studentname+"&task="+8+"&studentindex="+studentindex);	
}
function sendrequest2(){
	var id=document.getElementById("studentequery").rows[0].cells[0].innerHTML;
	var studentname1 = document.getElementById("studentname1").value;
	var studentindex1 = document.getElementById("studentindex1").value;
	var department = document.getElementById("department").value;
	var studentclass1 = document.getElementById("studentclass");
	var sid=studentclass1.selectedIndex;//selectedIndex为下拉框被选中的选项索引
	var studentclass=studentclass1[sid].innerText;
	var location = document.getElementById("location").value;
	var radio = document.getElementsByName("studentsex");
	for (i=0; i<radio.length; i++) {
		if (radio[i].checked) {//单选框里被选中的选项的checked属性为true
			var studentsex=radio[i].value;
		}
	}
	createXML();
	XMLHttpReq.open("post","Controller",true);// 通过open()方法取得与服务器的连接，发送POST请求
	XMLHttpReq.setRequestHeader("Content-Type",
	"application/x-www-form-urlencoded");// 设置请求头-发送 POST 请求时需要该请求头
	XMLHttpReq.onreadystatechange = processResponse2;// 指定 XMLHttpRequest 状态改变时的处理函数
	XMLHttpReq.send("task="+9+"&id="+id+"&studentname1="+studentname1+"&studentindex1="+studentindex1+"&studentsex="
			+studentsex+"&department="+department+"&studentclass="+studentclass+"&location="+location);	
}
function processResponse2(){
	if(XMLHttpReq.readyState == 4){
		if(XMLHttpReq.status == 200){						                          
            var txt=XMLHttpReq.responseText;                  
            	alert(txt);          
	}
}}
function processResponse1(){
	if(XMLHttpReq.readyState == 4){
		if(XMLHttpReq.status == 200){
			var classequery = document.getElementById("studentequery");
			while(classequery.rows.length>0){
				classequery.deleteRow(classequery.rows.length-1);
			}
            var txt=JSON.parse(XMLHttpReq.responseText);
            for(var i=0 , len = txt.length ;i< len ; i++){
            	var tr = classequery.insertRow(i);
            	var cell0 = tr.insertCell(0);            	
            	cell0.innerHTML = txt[i].id;           	
            	var cell1 = tr.insertCell(1);
            	cell1.innerHTML = txt[i].studentname;            	
            	var cell2 = tr.insertCell(2); 
            	cell2.innerHTML = txt[i].studentindex;            	
            	var cell3 = tr.insertCell(3);            	
            	cell3.innerHTML = txt[i].studentsex;            	
            	var cell4 = tr.insertCell(4);
            	cell4.innerHTML = txt[i].department;
              	var cell5 = tr.insertCell(5);
            	cell5.innerHTML = txt[i].studentclass;            	
            	var cell6 = tr.insertCell(6);            	
            	cell6.innerHTML = txt[i].location;            	
            }            	          
	}
}}

function display(){//给tbody添加点击事件，点击后，表格里的值会自动赋给对应的输入栏中
	var txt=document.getElementById("studentequery");
	document.getElementById("studentname1").value=txt.rows[0].cells[1].innerHTML;
	document.getElementById("studentindex1").value=txt.rows[0].cells[2].innerHTML;
	document.getElementById("department").value=txt.rows[0].cells[4].innerHTML;
	document.getElementById("location").value=txt.rows[0].cells[6].innerHTML;
}
</script>

<div class="place1">
<p align="center">查询条件</p>
学生姓名:<input type="text" style="color:black;" name="studentname" id="studentname" class="student"><br><br>
学生学号:<input type="text" style="color:black;" name="studentindex" id="studentindex" class="student"><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="查询" class="bu" onclick="sendrequest();">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="删除" class="bu" onclick="sendrequest1();">
</div>
<table class="place2" border="2">
<thead><tr>
<th>编号</th>
<th width=90>学生姓名</th>
<th width=100>学生学号</th>
<th width=50>性别</th>
<th width=100>所属学院</th>
<th width=110>所属班级</th>
<th width=160>家庭地址</th>
</tr>
</thead>
<tbody id="studentequery" onclick="display();"></tbody>
</table>
<div class="place3"><p>请输入学生姓名</p>
<input type="text" style="color:black;" name="studentname1" id="studentname1" class="student"><br><br>
<p>请输入学生学号</p>
<input type="text" style="color:black;" name="studentindex1" id="studentindex1" class="student"><br><br><br>
性别:&nbsp;&nbsp;&nbsp;男<input type="radio" value="男" name="studentsex">
&nbsp;&nbsp;&nbsp;女<input type="radio" value="女" name="studentsex"><br><br>
<p>请输入学生所在院系</p>
<input type="text" style="color:black;" name="department" id="department" class="student"><br><br>
<p>请选择学生班级</p>
<select name="studentclass" style="color:black;" class="student" id="studentclass">
</select>
</div>
<div class="place4">
<p>家庭地址</p>
<textarea rows="10" cols="20" style="resize:none;font-style:italic;color:black;font-weight:700;font-family:\6977\4F53_GB2312;" name="location" id="location">
</textarea><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="修改" class="bu" onclick="sendrequest2();">
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生管理总界面</title>
</head>
<body>
<style type="text/css">
.options{             
	    background-color:#6C6C6C;
	    box-shadow:0 0 1px #272727,
                    0px 0px 10px 2px #3C3C3C,
                    0px 0px 10px  4px #4F4F4F;
	    width:150px; 
	    height:150px;         	    
	    border:0;
	    font-size: 20px;
	    color:#F7ACBC;
	    font-style:italic;
	    font-family:\6977\4F53_GB2312;			              
            } 
.options:hover{
background-color:#6698FF;
transition-property:background-color;
}
.options:active{
width:170px;
transition-property:width;
}
#option1{position:absolute;
top:0px;
left:0px;
}
#option2{position:absolute;
top:150px;
left:0px;
}
#option3{position:absolute;
top:300px;
left:0px;
}
#option4{position:absolute;
top:450px;
left:0px;
}
</style>
<script type="text/javascript">
function addclass(){
	var service=document.getElementById("service");
	service.src="5.html";
}
function equeryclass(){
	var service=document.getElementById("service");
	service.src="6.html";
}
function addstudent(){
	var service=document.getElementById("service");
	service.src="7.html";
}
function equerystudent(){
	var service=document.getElementById("service");
	service.src="4.html";
}</script>
<input type="button" value="班级信息添加" id="option1" class="options" onclick="addclass();">
<input type="button" value="班级信息查询" id="option2" class="options" onclick="equeryclass();">
<input type="button" value="学生信息添加" id="option3" class="options" onclick="addstudent();">
<input type="button" value="学生信息查询" id="option4" class="options" onclick="equerystudent();">
<iframe src="cover.jpg" id="service"  align="right" width="1100" height="600">
</iframe>
</body>
</html>

结语：全篇未用框架，全是原生语言编写，所以看上去很臃肿。但这些都是学框架之前所必须要熟知的基础，也不可怠慢。