网页连接数据库 ~ 增删改查的简单实现完整代码-CFANZ编程社区

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body onload="get()"> 
//插入（添加）的页面样式
<div>
姓名<input type="text" name="name" id="name"/><br/>
身高<input type="text" name="height" id="height"/><br/>
年龄<input type="text" name="age" id="age"/><br/>
<input value="插入" type="button" onclick="insert()"/>

</div>

 //更新样式
<div style="display:none;background-color:red" id="up_div">
ID<input type="text" name="id" id="up_id"/><br/>
姓名<input type="text" name="name" id="up_name"/><br/>
身高<input type="text" name="height" id="up_height"/><br/>
年龄<input type="text" name="age" id="up_age"/><br/>
<input value="更改" type="button" onclick="update()"/>
</div>
</body>

//js部分
<script type="text/javascript">

function get() {
	$.ajax({
		url:"你的显示数据servlet链接",
		data:{},
		type:"get",
		success:function(value){
			console.log(value.data);
			ViewList(value.data);
		}
	})
}

//数据显示的表格
function ViewList(data) {
	console.log(data+"---");
	var html= '<table style="border:1px solid #000; width:300px;height:20px;">';
	for(var i=0;i<data.length;i++){
		html+='<tr>';
		html += '<td style="border:1px solid #000; width:30px;height:20px;" id="td_type">' + data[i].id + '</td>';
		html += '<td style="border:1px solid #000; width:60px;height:20px;" id="td_type">' + data[i].name + '</td>';
		html += '<td style="border:1px solid #000; width:30px;height:20px;" id="td_type">' + data[i].height + '</td>';
		html += '<td style="border:1px solid #000; width:30px;height:20px;" id="td_type">' + data[i].age + '</td>';
		html += '<td style="border:1px solid #000; width:135px;height:20px;">' ; 
		html += '<input style="border:1px solid #000; width:40px;height:20px;" id="td_type" type="submit" value="修改"   onclick="updateDiv('+data[i].id+')"/>';
		html += '<input style="border:1px solid #000; width:40px;height:20px;" id="td_type"type="submit" value="删除"   onclick="del('+data[i].id+')"/>';
		html+='</td>';
		html+='</tr>';
	}
	html +='</table>';
	$("#inf").empty().append(html);
}

//插入
function insert() {
	var name=$("#name").val();
	var height=$("#height").val();
	var age=$("#age").val();
	$.ajax({
		url:"你的插入servlet链接",
		data:{"name":name,"height":height,"age":age},
		
		success:function(value){
			console.log(value);
			
		}
	})
}

//这段是点击更新后，更新的页面显示出来
function updateDiv(id) {
	document.getElementById("up_div").style.display="block";
	$("#up_id").val(id);
}

//更新操作
function update() {
	var id=$("#up_id").val();
	var name=$("#up_name").val();
	var height=$("#up_height").val();
	var age=$("#up_age").val();
	$.ajax({
		url:"你的更新servlet链接",
		data:{"id":id,"name":name,"height":height,"age":age},
		
		success:function(value){
			console.log(value);
			
		}
	});
}

//删除
function del(id) {
	alert(id);
	$.ajax({
		url:"你的删除servlet链接",
		data:{"id":id},
		type:"get",
		success:function(value){
			console.log(value.data);
			ViewList(value.data);
		}
	})
}
function list(data) {
	
}
</script>
</html>

servlet.java：

查看.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//servlet成功生成，查看功能的后端Java 语言如下，前3行可解决中文乱码问题
		 request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");

		String sql = "select * from student";
		String sqlcount = "select count(*) from student";
		String[] colums = {"id","name","height","age"};
		String data = MysqlUtil.getJsonBySql(sqlcount, sql, colums);//注意引入mysqlutil文件
		System.out.println(data);

		response.getWriter().append(data);

	}

删除

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//servlet成功生成，删除功能的后端Java 语言如下，前3行可解决中文乱码问题	
         request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");

		String id=request.getParameter("id");
		System.out.println(id);
		String sql="delete from student where id="+id;

		int i=MysqlUtil.del(sql);注意引入mysqlutil文件

		String json="";
		if(i==0) {
			json="{\"code\":\"200\",\"message\":\"删除失败\"}";
		}else {
			json="{\"code\":\"200\",\"message\":\"删除成功\"}";
		}
		response.getWriter().append(json);
	}

插入。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//servlet成功生成，插入功能的后端Java 语言如下，前3行可解决中文乱码问题
	        request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		
		String name=request.getParameter("name");
		String height=request.getParameter("height");
		String age=request.getParameter("age");
		System.out.println(name+""+height+""+age);
		
		String insert ="insert into student(name,height,age) values('"+name+"',"+height+","+age+")"; 

		int i=MysqlUtil.add(insert);//注意引入mysqlutil文件

		String json="";
		if(i==0) {
			json="{\"code\":\"200\",\"message\":\"插入失败\"}";
		}else {
			json="{\"code\":\"200\",\"message\":\"插入成功\"}";
		}
		response.getWriter().append(json);
	}

更新（修改）

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//servlet页生成，更新功能的后端Java 语言如下，前3行可解决中文乱码问题	
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		
		String id=request.getParameter("id");
		String name=request.getParameter("name");
		String height=request.getParameter("height");
		String age=request.getParameter("age");
		System.out.println(id+" "+name+" "+height+" "+age);
		String update="update student set name = '"+name+" ',height = "+height+",age = " +age+ " where id= "+ id;

		int i=MysqlUtil.update(update);//注意引入mysqlutil文件

		String json="";
		if(i==0) {
			json="{\"code\":\"200\",\"message\":\"修改失败\"}";
		}else {
			json="{\"code\":\"200\",\"message\":\"修改成功\"}";
		}
		response.getWriter().append(json);
	}

//1.注意mysqlutil文件，（你的有增删改查的 Java代码文件）。

//2.要有jdbc链接数据库的java 代码文件