Flask影视项目删除操作触发JSONDecodeError错误求助

问题描述 #

使用Flask开发基于netu.ac链接的影视项目，后台/admin页面负责数据库增删操作。点击删除按钮时，数据库数据已成功删除，但会触发错误：

json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

相关代码 #

app.py 关键片段

@app.route('/admin', methods=['GET', 'POST'])
def admin_dashboard():
    # 检查用户是否登录
    if 'username' not in session:
        return redirect(url_for('login'))

    if request.method == 'POST':
        # 处理添加/删除影视内容的表单提交
        action = request.form['action']
        
        if action == 'add_movie':
            # 获取电影信息
            title = request.form['title']
            category = request.form['category']
            # 插入Supabase数据库
            supabase.table('movies').insert({'title': title, 'category': category}).execute()
        
        elif action == 'add_tvshow':
            # 获取剧集信息
            tvshow_name = request.form['tvshow_name']
            episode_number = int(request.form['episode_number'])
            category = request.form['category']
            # 插入Supabase数据库
            supabase.table('tvshows').insert({'tv_show_name': tvshow_name, 'episode_number': episode_number, 'category': category}).execute()
        
        elif action == 'remove':
            item_type = request.form['type']
            item_id = str(int(request.form['id']))  # 转换为字符串

            if item_type == 'movie':
                # 删除数据库中的电影
                supabase.table('movies').delete().eq('id', item_id).execute()
            elif item_type == 'tvshow':
                # 删除数据库中的剧集
                supabase.table('tvshows').delete().eq('id', item_id).execute()
            else:
                pass

admin.html 关键片段

function deleteItem(type, id) {
  var confirmDelete = confirm('确定要删除这个内容吗？');
  if (confirmDelete) {
    // 发送AJAX请求到服务器执行删除
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/admin', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 删除成功后从页面移除元素
        var item = document.getElementById(type + '-' + id);
        item.remove();
      } else {
        // 删除出错时打印错误信息
        console.error('删除失败:', xhr.responseText);
      }
    };
    xhr.send('action=remove&type=' + type + '&id=' + id);
  }
}

问题原因 #

后端处理remove操作的分支执行完数据库删除后，没有返回任何HTTP响应。Flask在视图函数未明确返回内容时，会默认返回空字符串（状态码200）。前端AJAX请求收到空响应后，会尝试将其解析为JSON，空字符串无法被解析为有效JSON，从而触发JSONDecodeError。

解决方案 #

在remove操作处理完成后，返回一个明确的JSON格式响应，让前端可以正确解析：

修改后的app.py remove分支代码

elif action == 'remove':
    item_type = request.form['type']
    item_id = str(int(request.form['id']))  # 转换为字符串

    if item_type == 'movie':
        supabase.table('movies').delete().eq('id', item_id).execute()
    elif item_type == 'tvshow':
        supabase.table('tvshows').delete().eq('id', item_id).execute()
    else:
        pass
    # 返回JSON格式的成功响应
    return jsonify({'success': True}), 200

注意：需要确保Flask导入了jsonify，在文件顶部添加from flask import jsonify

可选：前端AJAX优化（增强鲁棒性）

可以在前端添加JSON解析的异常处理，避免因响应格式问题导致逻辑中断：

xhr.onload = function() {
  if (xhr.status === 200) {
    try {
      const response = JSON.parse(xhr.responseText);
      if (response.success) {
        const item = document.getElementById(type + '-' + id);
        item.remove();
      }
    } catch (err) {
      // 即使解析失败，确认删除成功后仍移除DOM元素
      const item = document.getElementById(type + '-' + id);
      item.remove();
    }
  } else {
    console.error('删除失败:', xhr.responseText);
  }
};

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