Javaweb基础-前端与mysql交互
·
1.首先在mysql中创建一个表
CREATE TABLE user(
id INT not null PRIMARY KEY,
name VARCHAR(50),
age INT
);2.创建servlet项目，项目命名为ServletProject；导入jdbc包。
3.导入封装好的mysql连接包。
新建包，报名为mysql，然后把sql.java文件放到mysql包中就可以使用了。这个sql.java不是官方提供的，是我自己写的；可以实现简单的数据库增删改查操作。
public static String url="jdbc:mysql://localhost:3306/DATABASENAME?useUnicode=true&characterEncoding=utf-8";
public static String user="root";
public static String password="PASSWORD";【非常重要】下载好之后有必须要改的两个地方 ；第一，把url里面的DATABASENAME换成自己的database名(就是上面创建user表时使用的database的名字),第二把PASSWORD换成自己的MySQL的密码。
a)实现MySQL插入
前端html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mysql数据插入</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
用户名<input id="username" type="text" name="username"/><br/>
年龄<input id="age" type="text" name="age"/><br/>
<input type="button" value="提交" onclick="getInput()"/>
</body>
<script>
function getInput(){
var username=$("#username").val();/*Jquery语句，
等价于js中的document.getElementById("username").value;*/
var age=$("#age").val();
console.log(username);
console.log(age);
$.ajax({
type:"get",//get我们执行的是获取
url:"http://localhost:8080/ServletProject/MysqlServlet",//数据传输路径，就是servlet的路径
data:{"username":username,"age":age},//要传输的数据内容，注意ajax传输json类型的数据
success:function(value){
console.log(value.message);
}
});
}
</script>
</html>后端servlet代码，servlet的类名MysqlServlet(只有doGet代码，servlet其他部分代码不用动)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
String age=request.getParameter("age");
System.out.println(username+" "+age);
String sql="insert into user(name,age) values('"+username+"',"+age+");";
//sql语句拼接，我们要把前端传过来的username和age插入到数据库中的表里
System.out.println(sql);//显示我们拼接的sql语句，便于查看有无书写错误
int flag=mysql.sql.insert(sql);//调用我们的mysql封装包中的sql类的insert方法
String data;
if(flag==1)
data="{\"message\":\"插入成功\"}";
//我们要传输的数据，因为ajax以json作为数据传输载体，所以我们返回的数据也是json类型的
else
data="{\"message\":\"插入失败\"}";
System.out.println(data);
response.setCharacterEncoding("utf-8");//设置传输编码格式
response.setContentType("application/json;charset=utf-8");
response.getWriter().append(data);//把生成的data传回前端
}右键点击html文件空白处，选择Run As，选择Run As Server点击Finish；在tomcat中运行出现的文本框中输入同户名和年龄，点击提交；查看数据库中的数据。
b)实现MySQL修改
前端html代码(可以新建也可以在原有的基础上修改)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mysql数修改入</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
id<input id="id" type="text" name=id"/><br/>
用户名<input id="username" type="text" name="username"/><br/>
年龄<input id="age" type="text" name="age"/><br/>
<input type="button" value="提交" onclick="getInput()"/>
</body>
<script>
function getInput(){
var username=$("#username").val();/*Jquery语句，
等价于js中的document.getElementById("username").value;*/
var age=$("#age").val();
var id=$("#id").val();
$.ajax({
type:"get",//get我们执行的是获取
url:"http://localhost:8080/ServletProject/MysqlServlet",//数据传输路径，就是servlet的路径
data:{"username":username,"age":age,"id":id},//要传输的数据内容，注意ajax传输json类型的数据
success:function(value){
console.log(value.message);
}
});
}
</script>
</html>后端servlet代码，servlet的类名MysqlServlet(只有doGet代码，servlet其他部分代码不用动)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
String age=request.getParameter("age");
String id=request.getParameter("id");
String sql="update user set name='"+username+"',age="+age+" where id="+id+";";
//sql修改语句为update ... set ...where...
//我们把id为某一个值得用户的名字改为username年龄改为age
System.out.println(sql);
int flag=mysql.sql.update(sql);
String data;
if(flag==1)
data="{\"message\":\"修改成功\"}";
else
data="{\"message\":\"修改失败\"}";
System.out.println(data);
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
response.getWriter().append(data);
}右键点击html文件空白处，选择Run As，选择Run As Server点击Finish；在tomcat中运行出现的文本框中输入同户名和年龄，点击提交；查看数据库中的数据。
c)实现MySQL删除
前端html代码(可以新建也可以在原有的基础上修改)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mysql数修删除</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
id<input id="id" type="text" name=id"/><br/>
<input type="button" value="提交" onclick="getInput()"/>
</body>
<script>
function getInput(){
var id=$("#id").val();/*Jquery语句，
等价于js中的document.getElementById("username").value;*/
$.ajax({
type:"get",//get我们执行的是获取
url:"http://localhost:8080/ServletProject/MysqlServlet",//数据传输路径，就是servlet的路径
data:{"id":id},//要传输的数据内容，注意ajax传输json类型的数据
success:function(value){
console.log(value.message);
}
});
}
</script>
</html>后端servlet代码，servlet的类名MysqlServlet(只有doGet代码，servlet其他部分代码不用动)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id=request.getParameter("id");
String sql="delete from user where id="+id+";";
//sql删除语句delete from ... where ...
System.out.println(sql);
int flag=mysql.sql.delete(sql);
String data;
if(flag==1)
data="{\"message\":\"删除成功\"}";
else
data="{\"message\":\"删除失败\"}";
System.out.println(data);
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
response.getWriter().append(data);
}右键点击html文件空白处，选择Run As，选择Run As Server点击Finish；在tomcat中运行出现的文本框中输入同户名和年龄，点击提交；查看数据库中的数据。
d)实现MySQL查询
前端html代码(可以新建也可以在原有的基础上修改)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mysql数据查询</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
id<input id="id" type="text" name=id"/><br/>
<input type="button" value="提交" onclick="getInput()"/>
</body>
<script>
function getInput(){
var id=$("#id").val();/*Jquery语句，
等价于js中的document.getElementById("username").value;*/
$.ajax({
type:"get",//get我们执行的是获取
url:"http://localhost:8080/ServletProject/MysqlServlet",//数据传输路径，就是servlet的路径
data:{"id":id},//要传输的数据内容，注意ajax传输json类型的数据
success:function(value){
console.log(value);
}
});
}
</script>
</html>后端servlet代码，servlet的类名MysqlServlet(只有doGet代码，servlet其他部分代码不用动)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id=request.getParameter("id");
String sql="select * from user where id="+id+";";
//sql查询语句select * from ... where ...
System.out.println(sql);
String[] column= {"name","age"};//user表的列名
String data = mysql.sql.search(sql,column);//查询成功时传回json类型的字符串
if(data.equals(""))
data=new String("{\"message\":\"查询失败\"}");
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
response.getWriter().append(data);
}右键点击html文件空白处，选择Run As，选择Run As Server点击Finish；在tomcat中运行出现的文本框中输入同户名和年龄，点击提交；查看数据库中的数据。
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)