Python响应jQuery Ajax请求时前端返回Undefined值如何解决

该inplace内联编辑器的默认逻辑是：编辑提交成功后，直接将后端返回的响应正文作为编辑完成后页面展示的内容。你返回的"200"、success=True标识、嵌套JSON都不符合组件默认的返回值要求，Undefined报错是响应解析失败、未拿到可展示的合法文本导致的，同时你的代码里还有几个容易被忽略的低级问题。

• 修正前端HTML标签语法错误：你当前代码用<div>作为开标签，却用</a>闭合，属于不规范语法，可能导致DOM解析异常，修正后代码：

<td>
  <div class="inplace" 
       data-field-name="name" 
       data-field-value="{{people['name']}}" 
       data-url="/update/{{id}}">
    {{ people['name'] }}
  </div>
</td>

• 调整后端返回逻辑：组件默认提交的字段参数名为value，不需要返回状态标识、嵌套结构，直接返回更新后需要展示在页面上的纯文本值即可，同时设置正确的文本响应头，Flask端修正代码如下：

@app.route('/update/<id>', methods=["POST", "PATCH"])
@login_required
def update(id):
    # 解析前端提交的编辑后的值
    new_name = request.form.get('value')
    # 此处写你的数据库更新逻辑
    # ......
    # 直接返回要展示的文本，不要额外包裹其他字段
    return new_name, 200, {"Content-Type": "text/plain; charset=utf-8"}

如果你需要返回JSON格式（比如携带错误提示、状态标识），不能使用默认初始化配置，需要自定义回调函数处理响应，示例：

$('.inplace').inplace({
  method: 'PATCH', // 如果你要用PATCH方法提交，必须显式指定，组件默认用POST
  callback: function(rawResponse) {
    const res = JSON.parse(rawResponse);
    if (res.code === 0) {
      // 回调必须return字符串类型的展示值，否则就会出现Undefined
      return res.data.display_value;
    } else {
      alert(res.msg);
      // 编辑失败时返回原有值，避免页面显示异常
      return this.attr('data-field-value');
    }
  }
});

• 初始化时如果需要用PATCH提交，必须显式配置method: 'PATCH'，组件默认提交方法为POST，和你后端支持的方法不匹配时也会触发异常。

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