1 使用工具
- 1 eclipse,版本为4.8.0
- 2 tomcat v8.5
- 3 VSCode
2 创建项目
1、打开eclipse,依次点击File --> New --> Dynamic Web Project,打开后如图
2、之后在此跳转界面选择安装的tomcat
3、选好之后直接finish,跳回New Dynamic Web Project界面点击next,再次点击next,勾选
4、点击finish。
这时eclipse左侧会出现刚刚创建的项目,如图
2.1 新建java类
这时,打开如下图
右击Java Resources下的src包,选择new -->Servlet,之后填写Java包名以及类名,点击finish。
创建好的java类如图所示
此时我们已经创建好java后端文件,即将创建前端文件。
2.2 新建html文件
1、右击WebContent --> new -->HTML File,新建HTML文件如图所示,
2.3 导入jQuery库
导入jQuery步骤如下:直接将我们在VSCode中保存的 jQuery.js 文件(保存方法见本文)复制到WebContent文件夹下。此时我们的准备工作已经完成,接下来就是通过编辑前、后端代码文件进行前、后端交互的实现。
3 编辑HTML文件
由于eclipse不支持自动对齐等快捷键,所以我们在VSCode中编写HTML文件,之后将编写好的文件复制过来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
/*导入jQuery库*/
<script src="jquery.js"></script>
<script>
/*文档就绪函数*/
$(function() {
// 提交按钮绑定事件
$(".btn").on("click", function() {
// 发起请求
$.ajax({
/*请求地址*/
url: "login",
/*请求方式*/
type: "get",
/*发送到服务器的数据。将自动转换为请求字符串格式*/
data: {
account: $(".account").val(),
password: $(".password").val()
},
/*请求成功后的回调函数,参数由服务器返回*/
success: function(data) {
console.log(data)
}
})
})
})
</script>
</head>
<body>
账号:<input type="text" class="account"><br>
密码: <input type="text" class="password"><br>
<input type="button" value="提交" class="btn">
</body>
</html>
其中请求方式type分为两种:get和post。区别为:
get 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
post 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
4 编辑java后端文件
java后端代码只需编辑doGet/doPost即可,注意@WebServlet(“/login”)括号内参数必须与html代码中url相同。
package csdn;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class login
*/
@WebServlet("/login")
public class login extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public login() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("json/text");
//获取数据
String account = request.getParameter("account");
String password = request.getParameter("password");
//模拟逻辑
System.out.println("前端传过来的账号:"+account);
System.out.println("前端传过来的密码:"+password);
account = account + ",你好";
//定义传给前端的字符串,注意要用转义字符\将引号转义
String res = "{\"account\":\""+account+"\",\"password\":\""+password+"\",\"code\":\"0\"}";
//响应给前端
response.getWriter().write(res);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
这样就完成了项目创建以及前后端交互的代码了。
!注意改完代码需要右击项目refresh重启才能正常显示
5 网页结果
以下为网页输入以及控制台输出结果,到这一步前后端交互就算正确完成啦。
结语
本文从零开始说明了如何使用eclipse进行前后端交互,并提供了源代码以及运行结果。