当前位置：网站首页>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
边栏推荐
- 又一个行业被中国芯片打破空白，难怪美国模拟芯片龙头降价抛售了
- 3D vision - 2 Introduction to pose estimation - openpose includes installation, compilation and use (single frame, real-time video)
- 从零开始的基于百度大脑EasyData的多人协同数据标注
- 【BW16 应用篇】安信可BW16模组与开发板更新固件烧录说明
- “又土又穷”的草根高校，凭什么被称为“东北小清华”？
- Vite project commissioning
- The small project (servlet+jsp+mysql+el+jstl) completes a servlet with login function, with the operation of adding, deleting, modifying and querying. Realize login authentication, prevent illegal log
- Leetcode-1175.Prime Arrangements
- Go language web development series 29: Gin framework uses gin contrib / sessions library to manage sessions (based on cookies)
- Multi person collaborative data annotation based on Baidu brain easydata from scratch
猜你喜欢
又一个行业被中国芯片打破空白，难怪美国模拟芯片龙头降价抛售了
Bidirectional linked list (we only need to pay attention to insert and delete functions)
[email protected] Nanoparticles) | nano metal organic framework carry"/>Metal organic framework material zif-8 containing curcumin（ [email protected] Nanoparticles) | nano metal organic framework carry
Another industry has been broken by Chinese chips. No wonder the leading analog chip companies in the United States have cut prices and sold off
Go language web development series 29: Gin framework uses gin contrib / sessions library to manage sessions (based on cookies)
QT learning 20 standard dialog box in QT (middle)
Go language web development series 30: gin: grouping by version for routing
交联环糊精金属有机骨架负载甲氨蝶呤缓释微粒|金属-有机多孔材料UiO-66负载黄酮苷类药物|齐岳
SQL Injection (AJAX/JSON/jQuery)
Using registered classes to realize specific type matching function template
随机推荐
Failure of vector insertion element iterator in STL
Complete DNN deep neural network CNN training with tensorflow to complete image recognition cases
[understanding by chance-37]: the structure of human sensory system determines that human beings are self-centered
Doxorubicin loaded on metal organic framework MIL-88 DOX | folic acid modified uio-66-nh2 doxorubicin loaded [email
Global event bus
“又土又穷”的草根高校，凭什么被称为“东北小清华”？
JVM runtime data area
【BW16 应用篇】安信可BW16模组与开发板更新固件烧录说明
C language standard IO function sorting
Use docker to build sqli lab environment and upload labs environment, and the operation steps are provided with screenshots.
Go language web development series 28: solve cross domain access of CORS with gin contrib / CORS
Windos creates Cordova prompt because running scripts is prohibited on this system
[combinatorics] permutation and combination (examples of combinatorial number of multiple sets | three counting models | selection problem | combinatorial problem of multiple sets | nonnegative intege
There is nothing new under the sun. Can the meta universe go higher?
怎样删除对象的某个属性或⽅法
Rasp implementation of PHP
28：第三章：开发通行证服务：11：在配置文件中定义属性，然后在代码中去获取；
QT learning 23 layout manager (II)
JS continues to explore...
【556. 下一个更大元素 III】