Java学习第五十二部分——前端常用函数

[一. 前言提要](#一. 前言提要)

[二. 常用函数](#二. 常用函数)

[1. DOM操作函数](#1. DOM操作函数)

[2. 事件处理函数](#2. 事件处理函数)

[3. 网络请求（AJAX）](#3. 网络请求（AJAX）)

[4. 数据处理函数](#4. 数据处理函数)

[5. 表单操作](#5. 表单操作)

[6. 定时器](#6. 定时器)

[7. 浏览器存储](#7. 浏览器存储)

[8. 实用工具函数](#8. 实用工具函数)

[三. 与Java后端的协作场景](#三. 与Java后端的协作场景)

一. 前言提要

在Java Web项目中，"前端"通常指浏览器端的JavaScript代码，而非Java本身（Java是后端语言）。本文介绍和前端相关联的常用函数，帮助快速构建浏览器页面及其它与前端相关的组件。

二. 常用函数

1. DOM操作函数

选择元素

`document.getElementById(id)`

通过ID获取DOM元素。

`document.querySelector(selector)`

通过CSS选择器获取第一个匹配的元素。

`document.querySelectorAll(selector)`

获取所有匹配的元素（返回NodeList）。

修改内容/样式

`element.innerHTML = "内容"`

设置元素的HTML内容。

`element.textContent = "文本"`

设置元素的纯文本内容。

`element.setAttribute(name, value)`

设置元素属性（如 `href`, `class`）。

`element.classList.add()/remove()/toggle()`

动态操作CSS类。

2. 事件处理函数

`element.addEventListener(event, callback)`

绑定事件（如 `click`, `submit`）。

javascript 复制代码

button.addEventListener("click", () => {
  console.log("按钮被点击");
});

3. 网络请求（AJAX）

Fetch API（现代推荐）

javascript 复制代码

fetch("/api/data", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ key: "value" }) // 发送JSON到Java后端
})
.then(response => response.json()) // 解析JSON响应
.then(data => console.log(data))
.catch(error => console.error("请求失败", error));

XMLHttpRequest（传统方式）

javascript 复制代码

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data");
xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
  }
};
xhr.send();

4. 数据处理函数

JSON转换

`JSON.parse(jsonString)`

将JSON字符串转为JavaScript对象（Java后端返回的JSON常用）。

`JSON.stringify(object)`

将对象转为JSON字符串（发送数据到Java后端）。

数组操作

`array.map(callback)`

遍历并返回新数组（处理Java返回的列表数据）。

`array.filter(callback)`

过滤数组元素。

`array.forEach(callback)`

遍历数组。

javascript 复制代码

// 示例：处理Java返回的用户列表
const users = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}];
const names = users.map(user => user.name); // ["Alice", "Bob"]

5. 表单操作

阻止表单默认提交

javascript 复制代码

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault(); // 阻止页面刷新
  // 手动用AJAX提交数据到Java后端
});

获取表单数据

javascript 复制代码

const formData = new FormData(formElement);
// 直接用于Fetch的body
fetch("/api/submit", { method: "POST", body: formData });

6. 定时器

`setTimeout(callback, delay)`

延迟执行（如自动关闭通知）。

`setInterval(callback, interval)`

周期性执行（轮询Java后端数据）。

7. 浏览器存储

`localStorage.setItem(key, value)`

存储数据到浏览器（长期保存）。

`localStorage.getItem(key)`

读取数据。

`sessionStorage`

会话级存储（标签页关闭后清除）。

8. 实用工具函数

防抖（Debounce）

避免频繁触发事件（如搜索框输入）：

javascript 复制代码

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 使用示例
const searchInput = document.getElementById("search");
searchInput.addEventListener("input", debounce(() => {
  console.log("向Java后端发送搜索请求");
}, 300));

三. 与Java后端的协作场景

**数据交互**

前端用 `fetch` 发送JSON到Java的 `@RestController`。
Java返回JSON数据，前端用 `JSON.parse()` 处理。

**表单提交**

前端拦截表单，用AJAX提交数据，Java通过 `@PostMapping` 接收。

**认证/授权**

前端在请求头中添加 `Authorization: Bearer <token>`（JWT）。

**错误处理**

Java返回HTTP状态码（如 `401`、`500`），前端用 `.catch()` 或 `response.ok` 处理。

示例：前后端数据交互

javascript 复制代码

// 前端JavaScript
async function loadUserData() {
  try {
    const response = await fetch("/api/users");
    if (!response.ok) throw new Error("请求失败");
    const users = await response.json(); // 解析Java返回的List<User>
    renderUserTable(users);
  } catch (error) {
    console.error("加载数据失败", error);
  }
}

// Java后端（Spring Boot）
@RestController
public class UserController {
  @GetMapping("/api/users")
  public List<User> getUsers() {
    return userService.getAllUsers(); // 自动转为JSON
  }
}