后台管理页面经常需要一个搜索框:每敲一个字母就把用户表里姓名或邮箱匹配的行刷出来,方便直接改角色或删除。Flask 加 SQLite 十几行就能搭起来,但前后端各有一处容易踩的坑,稍不注意就会 400 报错或模板渲染失败。本文给出一套完整可运行的实现,并解释问题根源。
问题现象
典型代码结构是:前端 keyup 时用 jQuery AJAX 把关键词 POST 到/ajaxlivesearch,后端按name LIKE或email LIKE查询,用render_template渲染一段 HTML 以 JSON 返回,前端再插入页面。第一次运行往往直接失败,常见表现有三类:
一是页面加载即报400 Bad Request,后端日志里是BadRequestKeyException: 'query',来自request.form['query']取不到键。二是空关键词时模板渲染异常,提示numrows未定义。三是表格能出来但每格都是空的,row.id、row.name全部取不到值。
原因分析
三个现象分别对应三个机制问题。
第一个问题的源头在前端:页面加载时调用load_data()时没有传参,函数体内query是undefined,AJAX