|
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 代码文件
|