使用js2py从Python调用JS函数时出现document未定义错误

嘿，我明白你卡在哪了——这个问题其实是对前后端运行环境的核心误解导致的😉

为什么会报错？ #

你用js2py在Python后端运行JS代码，但这里的JS执行环境和浏览器里的完全不一样：

• console.log能运行是因为js2py模拟了JS的console对象，用来输出日志到Python的控制台。
• 但document是浏览器专属的DOM对象，Python后端的JS模拟环境里根本不存在这个东西，所以调用document.createElement肯定会报错。

简单说：后端Python没有浏览器的页面环境，自然没法操作前端的DOM。

正确的做法：DOM操作交给前端，后端负责数据逻辑 #

DOM操作必须在浏览器的前端JS里执行，后端只需要处理业务逻辑，然后把需要的信息返回给前端，让前端来完成页面修改。

下面是修改后的代码示例：

修改后的app.py（后端）

from flask import Flask, render_template, jsonify

app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")

@app.route('/python_func')
def python_func():
    # 这里可以写你的后端逻辑，比如查询数据库、计算数据等
    # 最后把需要传给前端的数据用json返回
    return jsonify({"content": "这是后端返回的内容，用来创建新div"})

修改后的script.js（前端）

$(function() {
    $('#startbtn').bind('click', function() {
        $.getJSON('/python_func', function(data) {
            // 这里是浏览器环境，完全可以操作DOM
            let div = document.createElement("div");
            div.textContent = data.content;
            // 把新div添加到页面里
            document.body.appendChild(div);
        });
        return false;
    });
});

额外提醒 #

• js2py的适用场景是在后端执行一些纯JS的逻辑（比如特定的算法、数据转换），而不是操作前端DOM。
• 前后端的通信是通过HTTP请求完成的，后端只负责提供数据，页面的交互和DOM操作永远是前端的工作。

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