使用Ajax实现学生管理界面

程序员文章站 2022-05-06 16:11:36

...

文章目录

学生列表接口
学生登记接口
学生管理界面（html）
github项目地址
参考资料

使用Ajax实现学生管理界面

学生列表接口

package com.testin.examples;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.testin.utils.DBUtil;

@WebServlet("/abc")
public class HelloServlet2 extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	public void service(HttpServletRequest req, HttpServletResponse resp) {
		PrintWriter pw = null;
		Connection conn = null;
		PreparedStatement stmt = null;
		StringBuilder text = new StringBuilder();
		text.append("{\"result\":\"success\",\"message\":\"\",\"data\":[");
        //解决响应正文内容包含中文会出现乱码的问题
        resp.setContentType("application/json;charset=utf-8");
		try {
			pw = resp.getWriter();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		try {	//
			conn = DBUtil.getConnection();
			stmt = conn.prepareStatement("SELECT * FROM student_yzc");
			ResultSet rs = stmt.executeQuery();
			while(rs.next()) {
				text.append("{\"sno\":"+rs.getInt(1)+","+
		                "\"sname\":\""+rs.getString(2)+"\""+",\"gender\":\""+rs.getString(3)+"\",\"birth\":"+
		                "\""+rs.getDate(4)+"\"},");
			}
            text = new StringBuilder(text.substring(0, text.length()-1));
            text.append("]}");
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		pw.println(text);
	}
}

学生登记接口

package com.testin.examples;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.sql.Connection;
import java.sql.Date;
import java.sql.PreparedStatement;
import java.sql.SQLException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.testin.utils.DBUtil;

@WebServlet("/save")
public class RegisterServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	@Override
	public void service(HttpServletRequest req, HttpServletResponse resp) {
		//设置响应内容的类型和编码
		resp.setContentType("application/json;charset=utf-8");
        try {
        	//解决请求参数内容包含中文会出现乱码的问题
			req.setCharacterEncoding("utf-8");
		} catch (UnsupportedEncodingException e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}
		PrintWriter pw = null;
		int sno = 0;
		try {
			pw = resp.getWriter();	//获取输出工具
			//获取学号
			sno = Integer.parseInt(req.getParameter("sno"));
		}catch(Exception e) {
			pw.println("{\"result\":\"fail\",\"message\":\"学号必须是整数！\"}");
			e.printStackTrace();
			return;
		}
		//获取姓名
		String sname = req.getParameter("sname");
		//获取性别
		String gender = req.getParameter("gender").equals("1")?"男":"女";
		//获取生日
		String birth = req.getParameter("birth");
		System.out.println("生日是："+birth);
		if(birth == null || birth.equals("")) {
			birth = new Date(System.currentTimeMillis()).toString();
		}
		Connection conn = null;
		PreparedStatement stmt = null;
		try {
			//连接数据库
			conn = DBUtil.getConnection();
			//获取预处理语句对象
			stmt = conn.prepareStatement("insert into student_yzc values(?,?,?,?)");
			stmt.setInt(1, sno);//设置第1个字段的内容
			stmt.setString(2, sname);//设置第2个字段的内容
			stmt.setString(3, gender);//设置第3个字段的内容
			stmt.setString(4, birth);//设置第4个字段的内容
			stmt.execute();//执行sql
			pw.println("{\"result\":\"success\",\"message\":\"登记成功！\"}");
		} catch (Exception e) {
			pw.println("{\"result\":\"fail\",\"message\":\"登记失败！\"}");
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				//关闭数据库连接
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
}

学生管理界面（html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">

function init(){
	//发送获取上一次访问时间的请求
    $.ajax({
        type: "get",
        url: "lastvisittime",
        cache: true,
        async: true,
        dataType: "json",
        success: function(text){	
        	if(text.result == "success"){
            	//创建一个包含上一次访问时间的节点
            	var node = "<h3>上一次的访问时间是：" + text.time + "</h3>"
            	//把这个节点添加到id是visit的div节点里面
            	$("#visit").html(node);
        	}else{
        		alert(text.message);
        	}        	
        }
    });	
	//加载学生的数据
	list();
}

function save(){
    $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "save" ,//url
            data: $("#register").serialize(),
            success: function (text) {
                //console.log(data);//打印服务端返回的数据(调试用)
                if (text.result == "success") {
                    list();//加载学生的数据
                }else{
                	alert(text.message);
                }
            },
            error: function(){
            	alert("异常");
            }
        });
}

function list(){
    $.ajax({
        type: "get",
        url: "abc",
        cache: true,
        async: true,
        dataType: "json",
        success: function(text){
        	console.log("重置表单");
        	$("#register")[0].reset(); 	//重置表单
            var table = "<table width=\"100%\">";
            table += "";
            $.each(text.data,function(index,obj){
                table += "<tr><td width=\"20%\">"+obj.sno+"</td><td width=\"20%\">" + obj.sname + 
                "</td><td width=\"20%\">" + obj.gender + "</td><td width=\"20%\">" + obj.birth + 
                "</td><td width=\"20%\"></td></tr>";
            });
            table += "</table>";
            //console.log(html);
            $("#xyz").html(table);
        }
    });
}
</script>
</head>
<body onload = "init();">
<h1>欢迎使用学生管理系统</h1>
<div id="visit"></div>
<div>
<form id="register">
<table width="100%">
<tr>
<td width="20%">学号</td>
<td width="20%">姓名</td>
<td width="20%">性别</td>
<td width="20%">生日</td>
<td width="20%"></td>
</tr>
<tr>
<td><input type="text" name="sno" /></td>
<td><input type="text" name="sname" /></td>
<td>
<input type="radio" name="gender" value="1" checked />男
<input type="radio" name="gender" value="0" />女
</td>
<td><input type="date" name="birth" /></td>
<td><input type="button" value="登记"  onclick="save();" /></td>
</tr>
</table>
</form>
</div>
<div id="xyz"></div>
</body>
</html>

github项目地址

https://github.com/yangzc23/ajaxdemo

参考资料

[01] JQuery中如何重置(reset)表单(且清空隐藏域)

微信扫一扫关注公众号
使用Ajax实现学生管理界面
点击链接加入群聊

https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105

上一篇：通过segue切换视图控制器

下一篇：调试工具GDB实践

使用Ajax实现学生管理界面

文章目录

学生列表接口

学生登记接口

学生管理界面（html）

github项目地址

参考资料

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十五)

【转载】使用宝塔对Linux系统进行界面化管理操作

python3使用tkinter实现ui界面简单实例

C#中如何使用Winform实现炫酷的透明动画界面

abp(net core)+easyui+efcore实现仓储管理系统——使用 WEBAPI实现CURD (十二)

使用ajax实现无刷新改变页面内容和地址栏URL

使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

使用Python的Django框架实现事务交易管理的教程

TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

iOS中使用UItableviewcell实现团购和微博界面的示例