0329-项目（添加删除修改）-EW帮帮网

JSON 是一种 轻量级的数据交换格式，用文本表示结构化数据，易于人阅读和机器解析。

Ajax 是一种 异步通信技术，允许网页在不刷新整个页面的情况下，通过 JavaScript 向服务器发送请求并接收响应。

前端：

student.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js" defer></script>
<script src="js/student.js" defer></script>
<style>
	.addModel,
	.updateModel{
		width:260px;
		height:140px;
		border:5px solid gold;
		margin-top:20px;
		padding:10px;
		display:none;
	}
</style>
</head>
<body>
<input type='button' value='添加'' class='add'>
	<table border='1'>
		<thead>
			<tr>
				<th>id</th>
				<th>name</th>
				<th>age</th>
				<th>sex</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>
	
	<div class='addModel'>
	 	姓名:<input type='text' class='addName'><br>
	 	性别:<input type='text' class='addSex'><br>
		年龄:<input type='text' class='addAge'><br>
		
		<input type='button' value="添加" class='addBtn'>
		<input type='button' value="取消" class='back'>
	</div>
	
	<div class='updateModel'>
	 	姓名:<input type='text' class='updateName'><br>
	 	性别:<input type='text' class='updateSex'><br>
		年龄:<input type='text' class='updateAge'><br>
		
		<input type='button' value="修改" class='updateBtn'>
		<input type='button' value="取消" class='back'>
	</div>

</body>
</html>

student.js

//查找
$.ajax({
	url:"SearchServlett",
	type:"get",
	success:function(value){
		var arr = value.data
		for(var i=0;i<arr.length;i++){
			$("tbody").append("<tr>"+
				"<td>"+arr[i].id+"</td>"+
				"<td>"+arr[i].name+"</td>"+
				"<td>"+arr[i].age+"</td>"+
				"<td>"+arr[i].sex+"</td>"+
			    "<td><input type='button' value='修改 ' class='update' index='"+arr[i].id+"'>  <input type='button' value='删除'  class='delete' index='"+arr[i].id+"'> </td>"+
				"</tr>")
		}
	},
	error:function(){
		alert("出错啦！")
	},
})
//添加小模块呈现
$(".add").click(function(){
	$(".addModel").css("display","block")
})
//取消 小模块隐藏
$(".back").click(function(){
	$(".addModel").css("display","none")
	$(".updateModel").css("display","none")
})

//添加（从前端页面拿到输入数据）
$(".addBtn").click(function(){

	//val 获取输入框里的值，trim()去掉空格
	//从输入框获取姓名
	var name=$(".addName").val().trim()
	var age=$(".addSex").val().trim()
	var sex=$(".addAge").val().trim() 
	if(name==""){
		alert("姓名不能为空")
		return
	}
	if(sex==""){
		alert("性别不能为空")
		return
	}
	if(age==""){
		alert("年龄不能为空")
		return
	}
	$.ajax({
		url:"AddServlet",
		type:"post",
		//name:name ,age:age..因为相同，所以省略，只写一个；
		//如果前面不同，则不能简写
		data:{
			name,
			age,
			sex
		},
		success:function(value){
			alert(value)
			//页面刷新（不需要重新启动）
			location.reload()
		},
		error:function(){
			alert("出错啦")
		}
	})
	
})
//修改小模块回显+信息在小模块复现
//未来元素:HTML里没有，在js里追加的元素 传入包含未来元素的HTML元素
$("tbody").on("click",".update",function(){
	//显示修改弹窗模块
	$(".updateModel").css("display","block")
	//获取当前点击行对应的数据ID（从按钮的index属性获取）
	var id=$(this).attr("index")
	//发送Ajax请求到后端
	$.ajax({
		url:"SearchById?id="+id,//向servlet传参
		type:"get",
		//value来自后端servlet的响应数据
		//data是后端返回的JSON中的属性
		success:function(value){
			//获取返回数据数组的第一条记录
			var obj=value.data[0]
			//将数据填充到修改表单
			$(".updateName").val(obj.name)
			$(".updateAge").val(obj.age)
			$(".updateSex").val(obj.sex)
			//将ID存储在修改按钮上
			$(".updateBtn").attr("index",obj.id)
		},
		error:function(){
			alert("出错啦")
		}
	})
})
//修改
$(".updateBtn").click(function(){
	var name=$(".updateName").val().trim()
	var sex=$(".updateSex").val().trim()
	var age=$(".updateAge").val().trim()
	var id=$(".updateBtn").attr("index")
	$.ajax({
		url:"UpdateServlet",
		type:"post",
		data:{
			name,
			age,
			sex,
			id
		},
		success:function(value){
			alert(value)
			location.reload()
		},
		error:function(){
			alert("出错啦")
		}
	})
})
//删除
$("tbody").on("click",".delete",function(){
	var id = $(this).attr("index")
	
	$.ajax({
		url:"DeleteServlet",
		type:"post",
		data:{
			id
		},
		success:function(value){
			alert(value)
			location.reload()
		},
		error:function(){
			alert("出错啦")
		}
	})
})

后端：

AddServlet.java

package com.qc.servlet;

import java.io.IOException;
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 com.qc.db.MysqlUtil;

/**
 * Servlet implementation class AddServlet
 */
@WebServlet("/AddServlet")
public class AddServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//		//接受参数
		String name=request.getParameter("name");
		String sex=request.getParameter("sex");
		String age=request.getParameter("age");
		//拼接sql
		String sql="insert into student(name,age,sex) values(\""+name+"\","+sex+",\""+age+"\")";
		//执行sql,返回所在行数
		int num=MysqlUtil.add(sql);
		//返回信息
		String res="添加失败";
		if(num>0) {
			res="添加成功";
	    }
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(res);
	}
}

SearchById.java [修改doget]

package com.qc.servlet;

import java.io.IOException;
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 com.qc.db.MysqlUtil;

/**
 * Servlet implementation class SearchById
 */
@WebServlet("/SearchById")
public class SearchById extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SearchById() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.从请求参数中获取id值
		String id=request.getParameter("id");
		//2.拼接SQL查询语句
		String sql="select * from student where id="+id;
		//3.定义需要从数据库结果集中提取的列名
		String[] colums= {"id","sex","age","name"};
		//4.调用工具类方法执行SQL查询并获取JSON格式的结果
		String res=MysqlUtil.getJsonBySql(sql, colums);
		//5.设置响应内容类型为JSON格式
		response.setContentType("text/json;charset=utf-8");
		//6.将JSON字符串写入响应输出流，返回给前端
		response.getWriter().write(res);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

UpdateServlet.java

package com.qc.servlet;

import java.io.IOException;
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 com.qc.db.MysqlUtil;

/**
 * Servlet implementation class UpdateServlet
 */
@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public UpdateServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		String sex=request.getParameter("sex");
		String id=request.getParameter("id");
		
		//拼接sql
		String sql="update student set name=\""+name+"\",age="+age+",sex=\""+sex+"\" where id="+id;
		//执行sql
		int num=MysqlUtil.update(sql);
		//返回信息
		String res="修改失败";
		if(num>0) {
			res="修改成功";
		}
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(res);
	}

}

DeleteServlet.java

package com.qc.servlet;

import java.io.IOException;
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 com.qc.db.MysqlUtil;

/**
 * Servlet implementation class DeleteServlet
 */
@WebServlet("/DeleteServlet")
public class DeleteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public DeleteServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String id=request.getParameter("id");
		//拼接sql
		String sql="delete from student where id="+id;
		//执行sql
		int num=MysqlUtil.del(sql);
		//返回信息
		String res="删除失败";
		if(num>0) {
			res="删除成功";
		}
		response.setCharacterEncoding("utf-8");
		response.getWriter().write(res);
	}

}

0329-项目（添加删除修改）

网站公告

今日签到

热门文章

最新发布

0329-项目（添加 删除 修改）

网站公告

今日签到

热门文章

最新发布

0329-项目（添加删除修改）