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

---

数据库user表

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

数据展示 search

function getdata(){
   
		$.ajax({
   
			url:"http://localhost:8088/MyTestServlet/search",
			success:function(data){
   
				ViewList(data.data);
				console.log(data);
			}
		})
	}
	//数据展示
	function ViewList(data){
   
		var html = '<table border="1">';
		for(var i=0;i<data.length;i++){
   
			html += '</tr>';
			html += '<td>' + data[i].id + '</td>';
			html += '<td >' + data[i].username + '</td>';
			html += '<td >' + data[i].password + '</td>';
			html += '<td >' + data[i].age + '</td>';
			html += '<td>';
			html += '<input type = "submit" value="修改" onclick="updateDiv('+data[i].id+')"/>';
			html += '<input type="submit" value="删除"   onclick="del('+data[i].id+')"/>';
			html += '</td>';
			html += '</tr>';	
		}
		html += '</table>';
		$("#fade").empty().append(html);
	}

SearchServlet

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);
	}

}

添加 insert

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

<style >
		.white_content{
   
			display:none;---是隐藏起来的一个input框框
			position : absolute;
			top : 25%;
			left : 25%;
			width : 25%;
			height :25%;
			padding : 20px;
			border : 10px solid orange;
			background-color : white;
			z-index : 1002;
			overflow :au