jQuery Ajax调用Python脚本无返回、控制台无输出问题

你的代码前后端都存在逻辑错误，才会导致请求无法正常触发回调、控制台无输出，逐个修改即可：

前端JS错误点 #

• dataType: "python"是非法配置：jQuery ajax 不支持python类型的响应解析，合法值仅包含json/text/html等，配置错误会直接导致请求失败，无法进入.done()回调。
• 传参变量未定义：你前面只声明了const catvalue = cat.value，请求参数里写的mapdict.catvalue是不存在的变量，会直接抛出JS运行时错误，请求根本发不出去。
• 请求地址错误：你直接填~/mapsinterpeter.py是文件系统路径，浏览器无法直接执行服务端/本地的Python脚本，直接请求这个地址只会返回404、403或者源码文件，拿不到函数执行结果。必须先把Python逻辑包装成可访问的HTTP接口。
• 缺失错误回调：之前你只写了成功回调，请求出错时没有任何日志，根本定位不到问题。

修正后的前端代码参考：

function onSubmit(e) {
    e.preventDefault()
    if(year.value === "" || cat.value === "") {
        msg.textContent = "Please fill out the fields"
        msg.classList.add("error");
        return;
    }
    msg.textContent = ""
    msg.classList.remove("error");
    const catvalue = cat.value
    $.ajax({
        type: "POST",
        url: "/api/get-maps", // 替换为后续Python服务提供的接口地址
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({param: [year.value, catvalue]}) // 修正变量名，序列化JSON参数
    }).done(function(res) {
        console.log("接口返回结果：", res)
    }).fail(function(xhr, status, err) {
        console.log("请求失败，状态：", status, "错误：", err)
    });
    year.value = ""
    cat.value = ""
}

后端Python错误点 #

• 没有对外提供HTTP服务：独立py脚本不能直接被前端请求调用，需要用web框架包装成接口，用最轻量化的Flask举例即可。
• 返回值逻辑错误：Python中list.append()是原地修改方法，返回值为None，你原来写return fl.append(...)实际返回的是空值，就算请求成功前端也拿不到有效数据。

修正后的Python代码参考：

from flask import Flask, request, jsonify
# 如果出现跨域问题，加装flask-cors导入CORS配置即可
app = Flask(__name__)

def get_maps(g):
    # 保留你原有的构建fl列表的逻辑
    fl = [] # 示例占位，替换成你自己的业务逻辑
    count = 0 # 示例占位
    telem = 0 # 示例占位
    fl.append({"maps": count, "totalelm": telem})
    return fl # 直接返回构建完成的列表，不要return append操作

# 绑定接口地址，和前端请求url对应
@app.route("/api/get-maps", methods=["POST"])
def maps_interface():
    req_data = request.get_json()
    input_params = req_data.get("param", [])
    result = get_maps(input_params)
    return jsonify(result)

if __name__ == "__main__":
    app.run(port=5000, debug=True)

运行注意事项 #

• 先启动Python服务，再打开前端页面发起请求，不要直接双击本地html文件用file协议访问，不然会有跨域/路径问题。
• 如果前端页面和Python服务端口不一致，配置flask-cors允许跨域请求即可。
• 路径不要写~/这种系统用户目录的缩写，web路由不识别这种写法，用相对路径或者完整的服务地址即可。

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