1.新建前后端文件
新建HTML文件和后端交互Servlet文件。新建文件的地址也有所要求,Servlet文件要在JavaResources下的src中。HTML文件在WebContent下
2. 引入jqury文件
后端与前端的互传需要通过jQuery的ajax,所以要传入jQuery的包到eclipse中,传入位置与HTML文件一致,放在WebContent下(同样css文件或其他img等都可以放在该目录下)
3.前端内容
在前端界面书写jquery内容。ajax格式如下。
<script src="js/jquery.js"></script>
<script>
$.ajax({
url:"testServlet",
type:"get", //请求方式 get post
success:function(value){
console.log(value)
},
error:function(){
alert("出错啦")
},
})
</script>
其中,“url”为所连接后端的文件名称。
“success”为请求成功时执行的代码 ,“error”为// 请求失败时执行的代码
“type”为不同的请求方式,get post传参形式不同,请求方式post需要传入data域(账户密码为例)
data:{
account:account,
password:password
}
只要能写地址的地方,都可以发起get请求 浏览器地址栏 a location.herf='' 查找,而post方式必须通过jquery +ajax实现 。
get请求通常用来查找,而post请求用于增删改
4.后端内容
新建一个Servlet文件,我们会发现,Servlet中有两个函数doGet和doPost.分别用于接受不同请求方式。
doGet函数中一些简单的语法示例:(从本地数据库的tests表中返回name,num,date三类数据)
其中MysqlUtil是提前写好的方法包,当然方法也可以自己写。导入即可。
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决中文乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//设置后端给前端返回的数据为json格式(大量数据)
response.setContentType("text/json;charset=utf-8");
//接收参数
//查找
String sql="SELECT * from tests";
String[] colums= {"name","num","date"};
String res=MysqlUtil.getJsonBySql(sql, colums);
//后端给前端返回数据
response.getWriter().write(res);
}
doPost函数中一些简单的语法示例:与doGet不同doPost需要接受前端的参数。
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决中文乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//设置后端给前端返回的数据为json格式(大量数据)
response.setContentType("text/json;charset=utf-8");
//接受前端的参数
String account=request.getParameter("account");
String password=request.getParameter("password");
//执行sql语句(查找数据库里是否有目的账号)
String sql="select count(*) FROM user WHERE account=\""+account+"\"";
int num=MysqlUtil.add(sql);
if(num>0) {
res="{\"code\":1,\"message\":\"该账号存在\"}";
}else {
res="{\"code\":0,\"message\":\"该账号不存在\"}";
}
response.getWriter().write(res);
}