Flask使用jsonify/render_template返回数据时JS接收值为undefined问题

开发Flask应用过程中，后端Python接口通过jsonify、render_template向前端返回字符串或渲染后模板内容时，前端JS始终无法正确解析后端返回的对象，控制台打印返回结果为undefined。

后端Flask代码 #

@app.route('/rep_bot',methods=['GET','POST'])
def bot_rep_py():
    print("bot_rep_py lancée")
    if request.method=='POST':
        input_text=request.form["js_input"]
        print(input_text)
        output_list=get_response(input_text)
        print(output_list)
        if type(output_list) == list:
            return render_template('form_comp.html',data=map(json.dumps,output_list))
        else:
            print("entrée dans else")
            return jsonify('0') # 职位未匹配时返回0，由前端JS处理提示
    else:
        return "erreur pas POST" 

前端JS代码 #

function bot_rep_js(input) {
  console.log("bot_rep_js lancée")
  console.log(input)
  $.post("http://127.0.0.1:5000/rep_bot", 
  {js_input:input},
  function(data){return data;}
  );
  console.log("bot_rep_js finie")
}

控制台输出日志 #

clickUpdate lancée
script.js:66 premier click
script.js:45 bot_rep_js lancée
script.js:46 devops
script.js:51 bot_rep_js finie
script.js:68 undefined

问题和Flask后端返回逻辑无关，核心是AJAX异步请求的执行机制问题：

• jQuery的$.post默认是异步请求，发起请求后JS主线程不会阻塞等待响应，会直接继续执行后续代码
• 写在$.post回调里的return data;只是回调函数的内部返回值，不会作为外层bot_rep_js函数的返回值
• 从日志顺序也能验证：bot_rep_js finie打印完成时，接口请求还没拿到响应，此时在外层读取返回值自然是undefined

不要尝试在异步请求的外层同步获取返回值，选择以下任意一种写法调整即可：

• 回调函数写法：所有依赖接口返回数据的后续逻辑，全部放到$.post的回调函数内部执行

  function bot_rep_js(input) {
    console.log("bot_rep_js lancée")
    console.log(input)
    $.post("http://127.0.0.1:5000/rep_bot", 
    {js_input:input},
    function(data){
      // 所有用到返回data的逻辑都写在这里
      console.log("接口返回内容：", data)
      // 后续渲染、业务处理逻辑...
    }
    );
  }
  

• async/await写法：将函数改为异步函数，等待请求返回后再执行后续逻辑

  async function bot_rep_js(input) {
    console.log("bot_rep_js lancée")
    console.log(input)
    const data = await $.post("http://127.0.0.1:5000/rep_bot", {js_input:input})
    console.log("接口返回内容：", data)
    console.log("bot_rep_js finie")
    // 后续逻辑直接使用data即可
    return data
  }
  

  注意：使用该写法时，调用bot_rep_js的上层代码如果需要获取返回值，也需要配合await或者.then()取值，否则会拿到Promise对象。

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