从零开始教你使用eclipse实现前后端交互

从零开始手把手教你如何使用eclipse实现前后端简单交互

qq_51626216

4281人浏览 · 2024-02-17 23:04:29

qq_51626216 · 2024-02-17 23:04:29 发布

前后端交互

1 使用工具
2 创建项目
3 编辑HTML文件
4 编辑java后端文件
5 网页结果
结语

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);
	}

}