一、附html和学生类代码
student.html
其中id为'tt'的表用来显示学生信息
id为'toup'的div用来做更改信息的回显，先设置style使div隐藏
id为'toad'的div是用来添加学生的输入信息框，也设置style使div隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<input type="text" id="key"><button onclick="findList()">查找学生</button><button onclick="toAdd()">添加学生</button>
<div>
<table id="tt" border="1"> </table>
</div>
<div id="toup" style="display: none;">
<input type="hidden" id="id" ><br>
姓名：<input type="text" id="name"><br>
年龄：<input type="text" id="age"><br>
性别：<input type="text" id="sex"><br>
<button onclick="update()">确认</button>
</div>
<div id="toad" style="display: none;">
姓名：<input type="text" id="tname"><br>
年龄：<input type="text" id="tage"><br>
性别：<input type="text" id="tsex"><br>
<button onclick="save()">点击添加</button>
</div>
</body>
</html>Student.class
学生类有四个属性，这里把sex设置为String类型了
package com.wsw.pojo;
public class Student {
private Integer id;
private String name;
private Integer age;
private String sex;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}
t_student表
二、实现简单的查询功能
在student.html页面中
<button οnclick="findList()">查找学生</button>点击调用findList()方法
2.1 jquery代码
function findList(){ //获得学生列表
$('#tt').empty(); //将学生表中的内容清空，防止每点一次按钮，多添加一个表格
var key = $('#key').val(); //获取搜索的key值，用来模糊查询
$.ajax({
url:"student?method=findList",
type:"POST",
data:"key="+key, //将key值传给后端
dataType:"JSON",
success:function(list){
$("#tt").append("<tr><td>id</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td></tr>")
for(var i in list){
$("#tt").append("<tr><td>"+list[i].id+"</td><td>"+list[i].name
+"</td><td>"+list[i].age+"</td><td>"+list[i].sex+
"</td><td><button onclick='toUpdate("+list[i].id+")'>更新</button></td><td>"
+"<button onclick='del("+list[i].id+")'>删除</button></td></tr>");
}
}
});
}2.2 controller层
private void findList(HttpServletRequest request,HttpServletResponse response) throws IOException {
String key = request.getParameter("key"); //获得前端传入的key值
List<Student> list = studentService.findList(key); //传入key值获得list集合
String listString = JSON.toJSONString(list); //使用fastjson包将列表转化为json字符串
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(listString); //将字符串响应给前端
}2.3 service层
public List<Student> findList(String key) {
// TODO Auto-generated method stub
return studentDao.findList(key);
}2.4 Dao层代码
public List<Student> findList(String key) {
// TODO Auto-generated method stub
key = key == null ? "" : key; //判断传入的key值是否为空
List<Student> list = null;
try {
list = runner.query("select * from t_student where name like ?","%"+key+"%", new BeanListHandler<>(Student.class));
} catch (Exception e) {
// TODO: handle exception
}
return list;
}2.5 查询实现截图
三、实现添加功能
3.1 jquery代码
首先，添加功能需要两个步骤：1，点击添加按钮，出现输入信息的输入框
2，点击确认按钮，将输入框的内容提交并保存到数据库
下面当点击‘添加学生’按钮将调用toAdd()方法显示输入框
输入完信息后点击'点击添加'按钮将调用save()方法保存信息并显示在表格
//步骤一
function toAdd(){ //将隐藏的输入框显示出来
$('#toad').show();
}
//步骤二
function save(){
//获取输入框的内容
var name = $('#tname').val();
var age = $('#tage').val();
var sex = $('#tsex').val();
$.ajax({
url:"student?method=save",
type:"POST",
data:"name="+name+"&age="+age+"&sex="+sex,
dataType:"JSON"
})
$('#toad').hide(); //将输入框隐藏
findList(); //调用方法，刷新列表
}3.2 controller 层
private void save(HttpServletRequest request,HttpServletResponse response) {
String name = request.getParameter("name");
String age = request.getParameter("age");
String sex = request.getParameter("sex");
Student student = new Student(); //创建学生对象
//将各个属性添加到学生类中
student.setAge(Integer.parseInt(age));
student.setName(name);
student.setSex(sex);
//保存到数据库
studentService.save(student);
}3.3 service层
public void save(Student student) {
// TODO Auto-generated method stub
studentDao.save(student);
}
3.4 Dao层
public void save(Student student) {
// TODO Auto-generated method stub
try {
runner.update("insert into t_student(name,age,sex) values(?,?,?)",student.getName(),student.getAge(),student.getSex());
} catch (Exception e) {
// TODO: handle exception
}
}3.5 添加功能实现截图
3.5.1 点击添加学生
3.5.2 输入信息
3.5.3 点击添加
四、实现更新功能
4.1 jquery代码
更新功能同样需要两个步骤：1、回显要更新的内容到输入框
2、将更新后的内容保存到数据库中
function toUpdate(id){
$.ajax({
url:"student?method=toUpdate",
type:"POST",
data:"id="+id,
dataType:"JSON",
success:function(student){
// console.log(student);
//将信息回显到输入框
$('#id').val(student.id);
$('#name').val(student.name);
$('#age').val(student.age);
$('#sex').val(student.sex);
}
})
$('#toup').show(); //显示输入框
}
function update(){
//获取更改后的信息
var id=$('#id').val();
var name=$('#name').val();
var age=$('#age').val();
var sex=$('#sex').val();
$.ajax({
url:"student?method=update",
type:"POST",
data:"id="+id+"&name="+name+"&age="+age+"&sex="+sex,
dataType:"JSON"
})
$('#toup').hide(); //隐藏输入框
findList();
}4.2 controller 层
//回显数据
private void toUpdate(HttpServletRequest request,HttpServletResponse response) throws IOException {
String id = request.getParameter("id");
//通过id获得此对象的信息
Student student =studentService.findStudentById(Integer.parseInt(id));
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(JSON.toJSONString(student));
}
//更新
private void update(HttpServletRequest request,HttpServletResponse response) {
String id = request.getParameter("id");
String name = request.getParameter("name");
String age = request.getParameter("age");
String sex = request.getParameter("sex");
Student student = new Student();
student.setAge(Integer.parseInt(age));
student.setId(Integer.parseInt(id));
student.setName(name);
student.setSex(sex);
studentService.update(student);
}4.3 service 层
public Student findStudentById(int parseInt) {
// TODO Auto-generated method stub
return studentDao.findStudentById(parseInt);
}
public void update(Student student) {
// TODO Auto-generated method stub
studentDao.update(student);
}4.4 Dao层
public Student findStudentById(int parseInt) {
// TODO Auto-generated method stub
Student student = null;
try {
student = runner.query("select * from t_student where id=?", parseInt, new BeanHandler<>(Student.class));
} catch (Exception e) {
// TODO: handle exception
}
return student;
}
public void update(Student student) {
// TODO Auto-generated method stub
try {
runner.update("update t_student set name=?,age=?,sex=? where id=?", student.getName(), student.getAge(),
student.getSex(), student.getId());
} catch (Exception e) {
// TODO: handle exception
}
}4.5 更新功能实现截图
4.5.1 选择最后一个点击更新
4.5.2 修改信息后点击确认
五 、实现删除功能
5.1 jquery代码
function del(id){
$.ajax({
url:"student?method=del",
type:"POST",
data:"id="+id,
dataType:"JSON"
})
findList();
}5.2 controller层
private void del(HttpServletRequest request,HttpServletResponse response) {
String id = request.getParameter("id");
studentService.del(Integer.parseInt(id));
}5.3 service 层
public void del(int parseInt) {
// TODO Auto-generated method stub
studentDao.del(parseInt);
}5.4 dao层
public void del(int parseInt) {
// TODO Auto-generated method stub
try {
runner.update("delete from t_student where id=?",parseInt);
} catch (Exception e) {
// TODO: handle exception
}
}
5.5 实现截图
5.5.1 点击删除最后一个学生
六 结语
本人初学者，写的代码不太完善，有错误请指出互相学习，谢谢~
4332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
