在一个页面实现数据库的增删改查

• 数据库user表
• 数据展示 search
• • SearchServlet
• 添加 insert
• • InsertServelt
• 删除 delete
• • DeleteServlet
• 修改 Update
• • UpdateServlet
• 总体代码
• 达到的效果
• • 增加
  • 删除
  • 修改

id age是int类型
username password是varchar类型的

function getdata(){
		$.ajax({
			url:"http://localhost:8088/MyTestServlet/search",
			success:function(data){
				ViewList(data.data);
				console.log(data);
			}
		})
	}
	//数据展示
	function ViewList(data){
		var html = '';
		for(var i=0;i
			html += '';
			html += '';
			html += '';
			html += '';
			html += '';
			html += '';
			html += '';	
		}
		html += '
' + data[i].id + '
' + data[i].username + '
' + data[i].password + '
' + data[i].age + '
';
			html += '';
			html += '';
			html += '
';
		$("#fade").empty().append(html);
	}

package com.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.sql.MysqlUtil;


@WebServlet("/search")
public class SearchServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		resp.setContentType("text/json;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		//查询语句 查询所有的user表中的内容
		String sql ="select * from user";
		String[] colums = {"id","username","password","age"};
		String data = MysqlUtil.getJsonBySql(sql, colums);
		System.out.println(data); 
		resp.getWriter().append(data);
	}
	
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doPost(req, resp);
	}

}

在添加和修改的时候都要弹出一个input框
在点击的时候出现,不点击的时候是隐藏起来的

	
         //当点击添加按钮时就会触发这个openDialog()方法,在这个方法中是让隐藏起来的input框显示出来
	

		用户名:

		密   码:

		年   龄:

				
                                    //点击提交之后又触发closeDialog()方法,将input框显示出来
	
	

 
 

定义一个InsertServelt去继承HttpServlet,URL中输入的地址是要以@WebServlet(“/insert”)里面的insert为准

package com.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.sql.MysqlUtil;

@WebServlet("/insert")
public class InsertServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		resp.setContentType("text/json;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		
		String age = req.getParameter("age");
		System.out.println(username + " " + password + " " +age); 
		String sql = "insert into user (username,password,age) "
				+ "values ('"+username+"','"+password+"',"+age+")";
		int count = MysqlUtil.add(sql);
		String data = "";
		if(count == 1) {
			data = "{"code":"200","message":"成功了"}";
		}else {
			data = "{"code":"999","message":"失败了"}";
		}
		resp.getWriter().append(data);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		super.doPost(req, resp);
	}
}

//删除
	function del(id){
		$.ajax({
			url:"http://localhost:8088/MyTestServlet/delete",
			data:{
				"id":id
			},
			success:function(data){//接收前台的数据
				console.log(data);
				getdata();//点击删除按钮进行自动刷新   不加这个就需要手动刷新
			}
		})
	}

@WebServlet("/delete")
public class DeleteServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		resp.setContentType("text/json;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		
		String id = req.getParameter("id");
		System.out.println(id);
		String sql = "delete from user where id="+id;
		int count = MysqlUtil.del(sql);
		String data = "";
		if(count == 1) {
			data = "{"code":"200","message":"成功了"}";
		}
		else {
			data = "{"code":"666","message":"失败了"}";
		}
		resp.getWriter().append(data);
	}

		id:	  

		用户名:

		密   码:

		年   龄:

				
	


//修改
	function updateDiv(id){
		document.getElementById('up').style.display='block';
		$("#U_id").val(id);
	}
	
	function closeUpDialog(){
		document.getElementById('up').style.display='none';
		var id = $("#U_id").val();
		var name = $("#U_username").val();
		var psw = $("#U_password").val();
		var age = $("#U_age").val();
		$.ajax({
			url:"http://localhost:8088/MyTestServlet/update",
			data:{
				"id":id,
				"username":name,
				"password":psw,
				"age":age
			},
			success:function(data){ //接收前台数据
				console.log(data);
				getdata();//页面刷新
			}
		})
	}

@WebServlet("/update")
public class UpdateServlet extends HttpServlet{
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		resp.setContentType("text/json;charset=utf-8");
		resp.setCharacterEncoding("utf-8");
		String id = req.getParameter("id");
		String username = req.getParameter("username");
		String password = req.getParameter("password");
		String age = req.getParameter("age");
		System.out.println(id+" "+username + " " + password + " " + age); 
		String sql = "update  user set username ="
				+ "'"+username+"',password = '"+password+"'"+",age="+age+"  where id =" +id;
		int count = MysqlUtil.update(sql);
		String data = "";
		if(count == 1) {
			data = "{"code":"200","message":"成功了"}";
		}else {
			data = "{"code":"999","message":"失败了"}";
		}
		resp.getWriter().append(data);
	}

	



	
	

		用户名:

		密   码:

		年   龄:

				
	
	

	
	
	

		id:	  

		用户名:

		密   码:

		年   龄: