当前位置：网站首页>Webpage connection database ~ simple implementation of addition, deletion, modification and query complete code

Webpage connection database ~ simple implementation of addition, deletion, modification and query complete code

2022-07-03 14:03:00 【A ke】

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> home page </title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body onload="get()"> 
// Insert （ add to ） Page style of 
<div>
 full name <input type="text" name="name" id="name"/><br/>
 height <input type="text" name="height" id="height"/><br/>
 Age <input type="text" name="age" id="age"/><br/>
<input value=" Insert " type="button" onclick="insert()"/>

</div>

 // Update Style 
<div style="display:none;background-color:red" id="up_div">
ID<input type="text" name="id" id="up_id"/><br/>
 full name <input type="text" name="name" id="up_name"/><br/>
 height <input type="text" name="height" id="up_height"/><br/>
 Age <input type="text" name="age" id="up_age"/><br/>
<input value=" change " type="button" onclick="update()"/>
</div>
</body>

//js part 
<script type="text/javascript">

function get() {
	$.ajax({
		url:" Your display data servlet link ",
		data:{},
		type:"get",
		success:function(value){
			console.log(value.data);
			ViewList(value.data);
		}
	})
}

// Data display table 
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=" modify "   onclick="updateDiv('+data[i].id+')"/>';
		html += '<input style="border:1px solid #000; width:40px;height:20px;" id="td_type"type="submit" value=" Delete "   onclick="del('+data[i].id+')"/>';
		html+='</td>';
		html+='</tr>';
	}
	html +='</table>';
	$("#inf").empty().append(html);
}

// Insert 
function insert() {
	var name=$("#name").val();
	var height=$("#height").val();
	var age=$("#age").val();
	$.ajax({
		url:" Your insertion servlet link ",
		data:{"name":name,"height":height,"age":age},
		
		success:function(value){
			console.log(value);
			
		}
	})
}

// This paragraph is after clicking update , The updated page is displayed 
function updateDiv(id) {
	document.getElementById("up_div").style.display="block";
	$("#up_id").val(id);
}

// update operation 
function update() {
	var id=$("#up_id").val();
	var name=$("#up_name").val();
	var height=$("#up_height").val();
	var age=$("#up_age").val();
	$.ajax({
		url:" Your update servlet link ",
		data:{"id":id,"name":name,"height":height,"age":age},
		
		success:function(value){
			console.log(value);
			
		}
	});
}

// Delete 
function del(id) {
	alert(id);
	$.ajax({
		url:" Your deletion servlet link ",
		data:{"id":id},
		type:"get",
		success:function(value){
			console.log(value.data);
			ViewList(value.data);
		}
	})
}
function list(data) {
	
}
</script>
</html>

servlet.java：

see .

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//servlet Successfully generated , View the back end of the function Java  The language is as follows , front 3 OK, it can solve the problem of Chinese garbled code 
		 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);// Pay attention to the introduction of mysqlutil file 
		System.out.println(data);

		response.getWriter().append(data);

	}

Delete

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//servlet Successfully generated , Delete the back end of the function Java  The language is as follows , front 3 OK, it can solve the problem of Chinese garbled code 	
         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); Pay attention to the introduction of mysqlutil file 

		String json="";
		if(i==0) {
			json="{\"code\":\"200\",\"message\":\" Delete failed \"}";
		}else {
			json="{\"code\":\"200\",\"message\":\" Delete successful \"}";
		}
		response.getWriter().append(json);
	}

Insert .

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//servlet Successfully generated , Insert the back end of the function Java  The language is as follows , front 3 OK, it can solve the problem of Chinese garbled code 
	        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);// Pay attention to the introduction of mysqlutil file 

		String json="";
		if(i==0) {
			json="{\"code\":\"200\",\"message\":\" Insert the failure \"}";
		}else {
			json="{\"code\":\"200\",\"message\":\" Insert the success \"}";
		}
		response.getWriter().append(json);
	}

to update （ modify ）

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//servlet Page generation , Back end of update function Java  The language is as follows , front 3 OK, it can solve the problem of Chinese garbled code 	
		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);// Pay attention to the introduction of mysqlutil file 

		String json="";
		if(i==0) {
			json="{\"code\":\"200\",\"message\":\" Modification failed \"}";
		}else {
			json="{\"code\":\"200\",\"message\":\" Modification successful \"}";
		}
		response.getWriter().append(json);
	}

//1. Be careful mysqlutil file ,（ There are additions, deletions, modifications and checks in yours Java Code file ）.

//2. Want to have jdbc Linked database java Code file

原网站

版权声明
本文为[A ke]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202150517401813.html

当前位置：网站首页>Webpage connection database ~ simple implementation of addition, deletion, modification and query complete code

Webpage connection database ~ simple implementation of addition, deletion, modification and query complete code

边栏推荐

猜你喜欢

随机推荐