Python Eel与JS交互问题：recv_data函数无法生成文件求助

你的代码存在三个关键问题导致功能失效，以下是具体问题和修复后的代码：

1. Python端文件写入错误 #

file.write()方法仅接受单个字符串参数，你传入三个参数会直接触发错误。另外，推荐使用with语句管理文件对象，无需手动调用close()，避免资源泄漏。

2. JavaScript变量名不匹配 #

你定义了变量klass存储年级输入值，但调用eel.recv_data时传入了未定义的grade，导致参数传递失败。

3. 表单默认提交行为未阻止 #

点击提交按钮会触发表单默认的页面刷新行为，中断Eel的异步调用，需要在事件处理函数中阻止该行为。

修复后的Python代码 #

import eel

eel.init("web")

@eel.expose
def recv_data(surname, name, grade):
    # 使用with语句自动管理文件，拼接字符串后写入
    with open("results.txt", "a+", encoding="utf-8") as f:
        f.write(f"{surname}, {name}, {grade}\n")

eel.start("index.html", mode="edge", size=(500,500))

修复后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <form action="#">
            <input type="text" id="surname" placeholder="Surname">
            <input type="text" id="name" placeholder="Name">
            <input type="text" id="grade" placeholder="Grade">
            <input type="submit" id="btn" value="Register">
        </form>
    </div>
    <script>
        let btn = document.querySelector("#btn");
        btn.addEventListener("click", sendData);
        
        async function sendData(event) {
            // 阻止表单默认提交刷新行为
            event.preventDefault();
            
            let surname = document.querySelector("#surname").value;
            let name = document.querySelector("#name").value;
            // 统一变量名为grade，避免不匹配
            let grade = document.querySelector("#grade").value;
            
            await eel.recv_data(surname, name, grade);
        }
    </script>
</body>
</html>

CSS代码无需修改 #

你的CSS样式没有问题，可以直接保留原代码。

修复后，点击Register按钮即可将输入内容追加写入results.txt文件，文件会生成在Python脚本的同级目录下。

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