Flask技术问题：含Blueprints时Javascript中url_for的正确使用

核心问题是蓝图下的视图函数端点必须添加蓝图名称作为前缀，原代码中url_for('autocomplete')仅适用于无蓝图的全局视图，在蓝图架构下会找不到正确路由。

具体解决步骤： #

1. 确认蓝图的名称标识
   打开base/__init__.py，查看蓝图定义的第一个参数（即蓝图的名称标识），示例代码如下：

   from flask import Blueprint
   # 这里的'base'就是蓝图的名称标识
   blueprint = Blueprint('base', __name__, static_folder='static', template_folder='templates')
   

2. 修正Javascript中的url_for调用
   将JS代码里的{{url_for('autocomplete')}}修改为{{url_for('蓝图名称.autocomplete')}}（把蓝图名称替换为你实际的蓝图标识，比如上面示例的base），修改后的代码：

   <script type="text/javascript">
   $(function () {
       $("input[id^='asset']").autocomplete({
           source: function (request, response) {
               $.getJSON("{{url_for('base.autocomplete')}}", {
                   q: request.term, 
               }, function (data) {
                   response(data.matching_results.slice(0, 10)); 
               });
           },
           minLength: 3,
           select: function (event, ui) {
               console.log(ui.item.value); 
           },
           focus: function (event, ui) {
               return false;
           }
       });
   })
   </script>
   

3. 验证蓝图注册正确性
   检查app/__init__.py中的蓝图注册代码，确保base蓝图已正确注册，示例：

   from base import blueprint as base_blueprint
   # 若注册时添加了url_prefix（如url_prefix='/base'），url_for会自动生成带前缀的路径，无需手动修改
   app.register_blueprint(base_blueprint)
   

4. 调试排查

   • 打开浏览器开发者工具（F12），切换到Network标签，输入3个字符后查看请求URL是否正确，是否出现404错误。
   • 可直接在模板中输出{{url_for('base.autocomplete')}}，验证生成的URL是否与后端路由匹配。

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