如何不使用表单，通过JS函数向Express服务器发送数独获胜数据？

前端实现（修改game.js） #

在checkWin函数的获胜判断逻辑里，直接使用浏览器原生的fetch API发送POST请求即可，不需要依赖表单或模板引擎反向修改数据：

let cells = document.querySelectorAll('.div-cell'); // 获取数独棋盘的单元格

function checkWin() {
    const db = getDb() // 获取localStorage中的数据库（包含数独信息，比如答案）
    let curentBoard = '' // 修复变量声明缺失的问题
    for (let i = 0; i < 81; i++) {
            if (cells[i].textContent === '') { // 检查单元格是否为空
            curentBoard += '-'
        } else {
            curentBoard += cells[i].textContent
        }
    }

    if (curentBoard === db.solution) { // 检查当前棋盘是否和答案一致
        // 准备要发送的统计数据，可根据需求调整字段
        const winData = {
            difficulty: db.difficulty, // 假设localStorage存储了难度信息
            completedTime: new Date().toISOString(),
            // 可添加用时、玩家标识等字段，需自行实现对应逻辑
        };

        // 发送POST请求到后端接口
        fetch('/api/save-win-record', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', // 告知服务器请求体为JSON格式
            },
            body: JSON.stringify(winData), // 将JS对象转为JSON字符串
        })
        .then(response => {
            if (!response.ok) throw new Error('数据提交失败');
            return response.json();
        })
        .then(result => {
            console.log('统计数据已保存:', result);
        })
        .catch(err => {
            console.error('保存出错:', err);
        });

        alert('You won!')
        newGame()
    }
}

后端实现（修改server.js） #

需要在Express中配置对应的POST路由，接收前端数据并写入MongoDB：

1. 先确保已经配置好MongoDB连接（以Mongoose为例），并定义统计数据模型：

// models/WinRecord.js
const mongoose = require('mongoose');

const winRecordSchema = new mongoose.Schema({
    difficulty: String,
    completedTime: Date,
    // 可扩展其他字段，如playerId（若有登录系统）、timeSpent等
});

module.exports = mongoose.model('WinRecord', winRecordSchema);

2. 在server.js中添加路由并处理请求：

const express = require('express');
const mongoose = require('mongoose');
const WinRecord = require('./models/WinRecord');
const app = express();

// 解析JSON格式的请求体，必须配置才能接收前端的JSON数据
app.use(express.json());

// 处理前端的统计数据提交请求
app.post('/api/save-win-record', async (req, res) => {
    try {
        // 从请求体中获取前端发送的数据
        const recordData = req.body;
        // 创建新的统计记录并保存到MongoDB
        const newRecord = new WinRecord(recordData);
        await newRecord.save();
        // 返回成功响应
        res.status(201).json({ 
            message: '记录保存成功', 
            data: newRecord 
        });
    } catch (err) {
        console.error('保存记录失败:', err);
        res.status(500).json({ 
            message: '服务器错误', 
            error: err.message 
        });
    }
});

// 连接MongoDB并启动服务器
mongoose.connect('mongodb://localhost:27017/sudoku-game')
.then(() => console.log('MongoDB连接成功'))
.catch(err => console.error('MongoDB连接失败:', err));

app.listen(3000, () => console.log('服务器运行在http://localhost:3000'));

关于你之前遇到的问题说明 #

• export/import无效：game.js是运行在浏览器的前端脚本，server.js是Node.js环境的后端代码，两者运行环境完全独立，无法直接共享函数，必须通过HTTP请求完成前后端通信。
• EJS无法修改数据：EJS是模板引擎，仅负责从后端向前端渲染初始数据，前端要修改后端数据库，必须通过HTTP请求触发后端接口操作，无法直接通过模板反向修改数据。

额外注意事项 #

• 确保前端请求的接口路径（如/api/save-win-record）和后端路由完全一致。
• 若前端和后端运行在不同端口，需在Express中配置跨域：安装cors包npm install cors，然后在server.js中添加const cors = require('cors'); app.use(cors());。

内容的提问来源于stack exchange，提问作者Glizer