JavaScript Ajax调用Python函数报get_maps未定义如何解决

你遇到的get_maps is not defined报错核心原因有三点：

• 浏览器端运行的JavaScript和服务器侧的Python是完全隔离的两个运行环境，存放在mapsinterpeter.py里的get_maps()函数从来没有被加载到前端JS的执行上下文中，你在JS回调里直接调用get_maps()时，JS引擎根本找不到这个函数，这个错误和Ajax请求本身是否发起成功没有关系。
• 你当前Ajax的请求地址直接指向mapsinterpeter.py静态文件，常规静态Web服务器遇到这类请求只会把py文件的原始文本作为响应返回，不会执行文件内的Python代码，更不会自动把文件里的函数暴露给前端调用。
• 现有代码没有把前端采集到的year、分类值等参数随请求传递给后端，就算后端能正常执行Python逻辑，也拿不到函数运行需要的入参。

前端JavaScript无法直接调用服务器上的Python函数，必须通过HTTP接口做桥接：先把Python逻辑包装成可被Web访问的接口服务，前端通过Ajax请求这个接口，后端服务收到请求后执行对应Python函数，再把执行结果返回给前端，前端在回调中读取响应内容拿到结果即可。

第一步：编写Python后端接口 #

用轻量Web框架Flask快速搭建接口服务，先安装依赖：

pip install flask flask-cors

在和mapsinterpeter.py同目录下新建后端服务文件app.py，代码如下：

from flask import Flask, request, jsonify
from flask_cors import CORS
# 导入你自己写的get_maps函数
from mapsinterpeter import get_maps

app = Flask(__name__)
# 允许前端跨域请求，本地调试时必需
CORS(app)

# 定义接口路由，对应前端POST请求的地址
@app.route('/api/get_maps', methods=['POST'])
def maps_interface():
    # 解析前端传来的参数
    params = request.get_json()
    year = params.get('year')
    cat = params.get('cat')
    # 调用目标Python函数拿到结果
    exec_result = get_maps(year, cat)
    # 将结果封装为JSON返回给前端
    return jsonify({"status": "success", "result": exec_result})

if __name__ == '__main__':
    # 启动服务，默认监听5000端口
    app.run(host='0.0.0.0', port=5000)

第二步：修改前端Ajax请求逻辑 #

不要直接请求py文件，改为请求上面搭建的后端接口地址，同时传递需要的参数，回调中直接读取后端返回的响应内容即可，不要在前端代码里直接调用get_maps()：

function onSubmit(e) {
    e.preventDefault()
    if(year.value === "" || cat.value === "") {
        msg.textContent = "Please fill out the fields"
        msg.classList.add("error");
    } else {
        msg.textContent = ""
        msg.classList.remove("error");
        const catvalue = cat.value
        const yearvalue = year.value
        $.ajax({
          type: "POST",
          // 同域部署时可写相对路径/api/get_maps，本地调试填后端服务的实际访问地址
          url: "/api/get_maps",
          contentType: "application/json",
          data: JSON.stringify({year: yearvalue, cat: catvalue}),
          success: function (response) {
           // 这里直接拿到后端执行完get_maps返回的结果
           console.log("函数执行结果：", response.result);
       },
       error: function(xhr) {
           console.log("请求失败：", xhr.statusText)
       }
        });
        year.value = ""
        cat.value = ""
    } 
}

运行注意事项 #

• 测试时要先启动Python后端服务（运行python app.py），确认接口可正常访问后再打开前端页面发起请求
• 如果使用在线部署平台，需要将后端服务的监听端口和平台分配的对外暴露端口对齐
• 除非使用Pyodide这类特殊的Web端Python运行方案，否则不要尝试在前端JS上下文里直接调用服务器侧的Python函数，HTTP接口桥接是这类场景的标准实现方式

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