像是许久未发文了，竟惊喜于百忙之中得以抽身。如不嫌弃，让心静上一静，听我叙上一叙这次的实践成果吧。
设计难题及解决方案（当然了，这是我的思考过程，并不是最佳）
如何分配好前端四个功能模块布置
我用的是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：
性别: 男<input type="radio" value="男" name="studentsex">
女<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;//按照字段id
降序排列(即从大到小排列),然后用limit限定查询出的记录数,后面的数字即为输出的记录数。命令的
总体功能就是：查询出最后一条记录.其中主键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>
<input type="button" value="查询" class="bu" onclick="sendrequest();">
<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>
性别: 男<input type="radio" value="男" name="studentsex">
女<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>
<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>
结语：全篇未用框架，全是原生语言编写，所以看上去很臃肿。但这些都是学框架之前所必须要熟知的基础，也不可怠慢。
本文转载自: https://blog.csdn.net/qq_57390446/article/details/124762311
版权归原作者 都是些老物件 所有， 如有侵权，请联系我们删除。
版权归原作者 都是些老物件 所有， 如有侵权，请联系我们删除。