Java web开发04 简单的登录界面 - 掘金 (juejin.cn)
在上篇文章中，我展示了怎么用HTML的form 连接前后端
在这篇文章中，我将展示怎么用JS的AJAX包连接前后端

HTML 和 JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <!-- 引入Bootstrap样式 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    /* 自定义样式 */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .form-group {
      width: 300px; /* 调整输入框宽度 */
      margin-bottom: 10px; /* 调整表单组之间的垂直间距 */
    }

    .login-button {
      display: flex;
      justify-content: center;
    }

    .register-button {
      display: flex;
      justify-content: center;
    }

    .button-group {
      width: 300px; /* 调整按钮组的宽度 */
      margin-top: 10px; /* 调整按钮组与上方元素的间距 */
      text-align: center; /* 居中按钮组 */
    }
  </style>
</head>
<body>
<div class="container">
  <h2>用户登录</h2>
  <form id="loginForm">
    <div class="form-group">
      <label for="username" style="margin-right: 10px;">用户名:</label>
      <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
    </div>
    <div class="form-group">
      <label for="password" style="margin-right: 35px;">密码:</label>
      <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
    </div>
    <div class="button-group">
      <button type="submit" class="btn btn-primary">登录</button>
      <a  href="register.html" class="btn btn-link">注册</a>
    </div>
  </form>
</div>

<!-- 引入jQuery和Bootstrap的JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script>
  $(document).ready(function () {
    // 监听loginForm表单的提交事件
    // submit 之后就会触发事件
    // $ 是document 的缩写

    $("#loginForm").submit(function (event) {
      event.preventDefault(); // 阻止表单的默认提交行为

      // 获取输入的用户名和密码
      var username = $("#username").val();
      var password = $("#password").val();
      console.log(username + " " + password);

      // 在这里可以添加验证逻辑，例如检查输入是否为空等

      // 创建一个对象来保存要发送的数据
      var formData = {
        username: username,
        password: password
      };

      // 使用AJAX将表单数据发送到后台
      // AJAX 前端浏览器可以使用的一个网络编程对象 XMLHttpRequest 用来给后端发送请求，监听回执
      // 一次通信： A -> B B 处理数据完成之后 返回一个结果发回给 A
      $.ajax({
        type: "POST",
        url: "/blog_war_exploded/hello-servlet",  // 替换为实际的后台处理URL
        // url:"https://localhost:8080/blog_war_exploded/hello-servlet", // 全称
        data: formData,
        success: function (response) {
          // 在这里可以处理后台返回的响应
          // 例如根据响应结果进行页面跳转或显示错误信息等
          console.log("Success" + response);
          if (response == 'success') {
            window.location.href = "blog.html";
          } else {
            alert("用户名或密码错误");
          }
        },
        error: function (error) {
          console.log("Error" + error);
        }
      });
    });
  });
</script>
</body>
</html>

Servlet 代码

package com.example.blog;

import java.io.*;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;

@WebServlet(name = "helloServlet", value = "/hello-servlet")
public class HelloServlet extends HttpServlet {
    private String message;

    public void init() {
        message = "Hello World!";
    }

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {

        // Login
        request.setCharacterEncoding ("UTF-8");
        response.setContentType ("text/html;charset=UTF-8");

        String name = request.getParameter ("username");
        String password = request.getParameter ("password");
        System.out.println ("name = " + name);
        System.out.println ("password = " + password);
        
        if(name =="user" && password =="123465"){
            // 用户存在
            response.getWriter().write("success");
        }else{
            // 用户不存在
            response.getWriter ().write ("fail");

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }

    public void destroy() {
    }
}

Java web开发04.2 简单的登录界面2（用JS提交信息）

HTML 和 JS

Servlet 代码