如何在Flask应用的JS函数中使用url_for？

我已在Heroku上部署了Flask应用，HTML、CSS页面能从分配的域名正常加载。本地测试时用http://127.0.0.1:5000验证功能没问题。为让应用在Heroku上正常运行，我尝试用url_for，之前仅能在HTML里用它渲染CSS、JS文件，但没法在JS文件中调用Python定义的路由函数。我的JS代码如下：

function sendResponse(rawText) {
    var url = "http://127.0.0.1:5000/get_response"
    $.post(url,{
        user_text:rawText
    },function(data, status){
    if(data !== "undefined"){
      console.log(data['bot_response'])
      var botHtml = '<p class="botText"><span>' + data['bot_response'] + '</span> </p>';
        $("#chatbox").append(botHtml);
        document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 
        'smooth'});
        return data['bot_response']
        
    }
})
}

解决方案 #

方法1：在HTML中注入路由URL到全局变量 #

在Flask渲染的HTML模板里，用url_for生成路由的URL，赋值给全局JS变量，让JS文件直接引用：

<script type="text/javascript">
    // 注入路由URL到全局变量
    const getResponseUrl = "{{ url_for('get_response') }}";
</script>
<!-- 确保该script标签在自定义JS文件之前加载 -->
<script src="{{ url_for('static', filename='js/your_script.js') }}"></script>

修改JS代码：

function sendResponse(rawText) {
    // 使用全局变量代替硬编码URL
    var url = getResponseUrl;
    $.post(url,{
        user_text:rawText
    },function(data, status){
        if(data !== undefined){ // 注意：原代码判断字符串"undefined"错误，应直接判断undefined
          console.log(data['bot_response'])
          var botHtml = '<p class="botText"><span>' + data['bot_response'] + '</span> </p>';
            $("#chatbox").append(botHtml);
            document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
            return data['bot_response']
        }
    })
}

方法2：使用相对路径 #

如果路由是根路径下的/get_response，直接用相对路径即可适配本地和Heroku环境：

function sendResponse(rawText) {
    // 用相对路径代替硬编码的本地URL
    var url = "/get_response";
    $.post(url,{
        user_text:rawText
    },function(data, status){
        if(data !== undefined){
          console.log(data['bot_response'])
          var botHtml = '<p class="botText"><span>' + data['bot_response'] + '</span> </p>';
            $("#chatbox").append(botHtml);
            document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
            return data['bot_response']
        }
    })
}

额外注意事项 #

• 确保Flask的路由函数get_response支持POST方法，并正确返回JSON格式：

from flask import jsonify, request

@app.route('/get_response', methods=['POST'])
def get_response():
    user_text = request.form.get('user_text')
    # 此处添加你的回复生成逻辑
    bot_response = "处理后的回复内容"
    return jsonify({'bot_response': bot_response})

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