id 用于唯一标识元素，便于 CSS 样式设置和 JavaScript 操作；name 主要用于表单元素，在表单提交时标识数据；value 则用于表示表单元素的当前值。
回调函数
// setTimeout 是一个高阶函数，它接收一个回调函数和一个延迟时间作为参数
function sayHello() {
console.log('Hello!');
}
// 2 秒后调用 sayHello 回调函数
setTimeout(sayHello, 2000);
// 也可以使用匿名函数作为回调函数
setTimeout(function () {
console.log('This is an anonymous callback function.');
}, 3000);Fetch
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求出错:', error);
});传给后端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Send Data to Backend</title>
</head>
<body>
<input type="text" id="inputField" placeholder="请输入内容">
<button id="submitButton">提交</button>
<script>
const inputField = document.getElementById('inputField');
const submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', async () => {
const inputValue = inputField.value;
try {
const response = await fetch('http://localhost:3000/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ data: inputValue })
});
if (!response.ok) {
throw new Error('网络响应失败');
}
const result = await response.json();
console.log(result);
} catch (error) {
console.error('请求出错:', error);
}
});
</script>
</body>
</html>const express = require('express');
const app = express();
const port = 3000;
// 解析 JSON 格式的请求体
app.use(express.json());
// 处理 POST 请求
app.post('/api/data', (req, res) => {
const inputData = req.body.data;
console.log('接收到的数据:', inputData);
res.json({ message: '数据接收成功', receivedData: inputData });
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器正在监听端口 ${port}`);
});
Express 是一个基于 Node.js 的快速、轻量级的 Web 应用框架，被广泛用于构建 Web 应用和 API 服务。