如何通过Python Eel将计算结果传递给JavaScript并展示在HTML页面中

你现在拿不到Python回传值的根本问题，是没搞懂Eel的跨语言调用机制：Python侧被@eel.expose装饰的函数，在JS端调用时不会同步返回计算结果，而是返回一个封装好的Promise对象，必须通过绑定回调函数才能拿到Python传回来的实际值。

Python端代码 #

你现有写的逻辑基本能用，补个简单的异常容错就行，不用大改：

import eel
# 初始化静态资源目录，路径要和存index.html的web文件夹对应
eel.init('web')

# 暴露给JS调用的求和函数
@eel.expose
def sum(a, b):
    # 加个异常捕获，避免用户输入非数字直接崩掉
    try:
        return int(a) + int(b)
    except ValueError:
        return "请输入有效的整数"

# 启动桌面应用窗口
eel.start('index.html', size=(500, 500))

小提示：如果求和逻辑里不需要发网络请求，导入的requests库可以删掉，减少冗余依赖

JS端代码（核心修正部分） #

原来的代码只做到了调用Python函数，没接返回值，这里补上回调逻辑就行，完整可运行的代码参考：

// 给提交按钮绑定点击事件，别写完函数忘了触发入口
document.querySelector('button[type="submit"]').addEventListener('click', async function(e) {
    // 阻止表单默认的页面跳转行为
    e.preventDefault();
    // 取两个输入框的值
    const val1 = document.getElementById('data_1').value.trim();
    const val2 = document.getElementById('data_2').value.trim();

    // 调用Python暴露的sum函数，两种取结果的写法选一种就行
    // 写法1：async/await写法，读起来最顺
    const result = await eel.sum(val1, val2)();
    // 写法2：传统回调写法
    // eel.sum(val1, val2)(res => {
    //   document.getElementById('file-name').innerText = `计算结果：${res}`
    // })

    // 把结果写到指定的展示div里
    document.getElementById('file-name').innerText = `两数相加的结果是：${result}`;
})

HTML端核对项 #

提前查这些容易漏的点，免得调试半天卡壳：

• 脚本引入顺序不能乱：先引入Eel自动生成的/eel.js，再引入你自己写的myscript.js，顺序反了会报eel未定义的错
• 核对DOM的id和JS里取的是不是完全一致：两个输入框是data_1、data_2，结果展示div是file-name，别拼错字母
• 确认提交按钮在表单结构里，点击事件能正常触发

• 别直接写const res = eel.sum(a,b)，这样拿到的是Eel封装的调用方法，不是实际的计算结果，必须跟上回调或者await步骤，才能拿到Python传回来的值
• 如果启动后报路径找不到的错，检查eel.init()的参数是不是指向了存放index.html的web目录，路径错了Eel是加载不到页面资源的

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