JavaWeb进阶案例-实现AJAX+Sevlet前后端分离开发

以下是一个简化的示例，展示了如何使用AJAX和Servlet实现前后端分离的登录功能：

前端HTML和JavaScript代码（假设使用jQuery库）:




<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#loginForm").submit(function(event){
                event.preventDefault(); // 阻止表单默认提交行为
                var username = $("#username").val();
                var password = $("#password").val();
 
                $.ajax({
                    url: "login", // 对应的Servlet URL
                    type: "POST",
                    data: { username: username, password: password },
                    success: function(response){
                        if(response === "success"){
                            alert("登录成功！");
                            // 登录成功后的操作，例如跳转页面
                        } else {
                            alert("登录失败，请检查用户名和密码！");
                        }
                    },
                    error: function(){
                        alert("登录失败，请检查网络连接！");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="loginForm">
        用户名: <input type="text" id="username" name="username"><br>
        密码: <input type="password" id="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

后端Servlet代码 (LoginServlet.java):




import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
 
public class LoginServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
 
        // 这里只是示例，实际开发中应该查询数据库验证用户名和密码
        if("admin".equals(username) && "password".equals(password)){
            response.getWriter().write("success");
        } else {
            response.getWriter().write("fail");
        }
    }
}

在这个例子中，前端使用AJAX技术向后端的LoginServlet发送登录请求，Servlet处理完后返回操作结果。前端JavaScript根据返回结果显示相应的提示信息。这样的实现方式提高了用户体验，同时也使得前后端的开发可以同时进行，实现了真正的前后端分离。

JavaWeb进阶案例-实现AJAX+Sevlet前后端分离开发

评论已关闭

推荐阅读