0


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

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

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

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

我用的是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;//按照字段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>
&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>

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

标签: 前端 后端 mysql

本文转载自: https://blog.csdn.net/qq_57390446/article/details/124762311
版权归原作者 都是些老物件 所有, 如有侵权,请联系我们删除。

“用Ajax,json,MYSQL,前端后端语言创建一个学生管理系统吧~~”的评论:

还没有评论