一、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='js/jquery.js'></script>
<script>
/*
1.传参方式不同
get 传参 url:"index?account=admin&password=123456"
*/
/*
post 传参 data:{ account:"admin",
password:"123456"
}
*/
//2 只要是能写地址的地方都可以发起 get 请求，浏览器地址栏一般用于查找
//post 通过 jquery + ajax + form 修改、添加、删除
$.ajax({
url:"IndexServlet",
type:"get",
data:{
account:"admin",
password:"123456"
},
success:function(value){
console.log(value);
console.log("登录成功");
},
error:function(){
}
})
</script>
</head>
<body>
<h1>hello</h1>
<a href="IndexServlet?account=admin&password=123456">点击</a>
</body>
</html>在上述前端代码中，我们使用了 jQuery 的 ajax 方法来与后端进行交互。这里我们指定了请求的 URL 为 "IndexServlet"，请求方式为 "get"，并传递了账号和密码参数。在 success 回调函数中，我们可以处理后端返回的成功响应，这里只是简单地在控制台打印返回的值和 “登录成功” 的消息。在 error 回调函数中，目前没有具体的处理逻辑，可以根据实际需求添加错误处理代码。
此外，页面中还有一个 <a> 标签，点击它也会以 GET 方式向 "IndexServlet" 发送请求，并携带账号和密码参数。
二、后端代码
package com.qcby.servlet;
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 IndexServlet
*/
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public IndexServlet() {
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");
// 接受参数
String acc = request.getParameter("account");
String pass = request.getParameter("password");
response.setContentType("text/json;charset=utf-8");
System.out.println("账号为" + acc);
System.out.println("密码为" + pass);
String res;
if (acc.equals("admin") && pass.equals("123456")) {
System.out.println("登录成功");
res = "{\"name\":\"lzc\",\"age\":\"12\",\"site\":\"1111\"}";
} else {
res = "登陆失败";
System.out.println("登录失败");
}
// 后端给前端返回数据
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 这里将 POST 请求转发到 doGet 方法进行处理
doGet(request, response);
}
}后端代码是一个 Java Servlet，用于处理来自前端的请求。在 doGet 方法中，首先设置了请求和响应的字符编码为 "utf-8"，以确保中文能够正确处理。然后通过 request.getParameter 方法获取前端传递的账号和密码参数。接着设置响应的内容类型为 "text/json;charset=utf-8"，表示返回的是 JSON 格式的数据且字符编码为 UTF-8。
如果账号和密码正确（这里是固定的 "admin" 和 "123456"），则返回一个包含用户信息的 JSON 字符串；如果不正确，则返回 "登陆失败"。
在 doPost 方法中，将 POST 请求转发到 doGet 方法进行处理，这样可以使 POST 请求和 GET 请求的处理逻辑保持一致。
通过以上代码示例，我们可以看到在 Eclipse 中实现前后端交互的基本方法。在实际开发中，可以根据具体需求进行扩展和优化，例如添加更复杂的业务逻辑、使用数据库进行数据存储等。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Eclipse 前后端交互实战
发表评论 取消回复