Django中JS扫描二维码结果无法POST到后端Python函数的问题

问题描述 #

在nurse_home.html中通过HTML+JavaScript实现二维码扫描功能，已能在网页显示扫描结果，但存在两个核心问题：

1. 无法将<output id='result' name='result' placeholder='qrCodeMessage'>中的扫描结果通过POST提交到views_nurse.py的nurse_qrscan函数写入数据库。已添加fetch请求，后端能触发POST分支，但始终获取不到result的值。
2. 单次扫描会触发多次POST请求。

问题排查与解决方案 #

1. 后端无法获取result值的修复 #

前端侧问题修正

• 无效属性修正：<output>标签不存在type='POST'属性，浏览器不会自动将其识别为表单控件，必须手动获取其value值。
• 请求格式修正：fetch请求需正确传递数据格式，以下是两种可行写法：

  // 获取扫描结果
  const scanResult = document.getElementById('result').value;
  if (!scanResult) return; // 空值直接跳过
  
  // 方式1：用FormData传递（适配后端表单解析逻辑）
  const formData = new FormData();
  formData.append('result', scanResult);
  
  fetch('/nurse_qrscan', {
    method: 'POST',
    body: formData,
    credentials: 'include' // 需携带session/cookie时添加
  })
  .then(res => res.json())
  .catch(err => console.error('请求失败:', err));
  

  若后端接收JSON格式，可改用：

  fetch('/nurse_qrscan', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ result: scanResult }),
    credentials: 'include'
  })
  

后端侧问题修正（以Django为例）

• 若前端用FormData传递，用request.POST获取：

  def nurse_qrscan(request):
      if request.method == 'POST':
          scan_result = request.POST.get('result', '')
          if scan_result:
              # 写入数据库逻辑，例如：
              # Record.objects.create(qr_content=scan_result)
              return JsonResponse({'status': 'success'})
          return JsonResponse({'status': 'error', 'msg': '无有效扫描数据'})
  

• 若前端用JSON传递，需解析请求体：

  import json
  def nurse_qrscan(request):
      if request.method == 'POST':
          data = json.loads(request.body)
          scan_result = data.get('result', '')
          # 后续写入逻辑同上
  

  注意：若后端启用CSRF验证，需在fetch请求中携带CSRF令牌（可通过页面隐藏域获取），生产环境禁止直接加@csrf_exempt绕过验证。

2. 单次扫描多次POST的修复 #

• 添加请求锁定机制：设置标志位避免重复触发请求：

  let isProcessing = false;
  
  function handleScanSuccess(result) {
      if (isProcessing) return;
      isProcessing = true;
  
      // 更新页面显示
      document.getElementById('result').value = result.text;
  
      // 发起POST请求
      fetch('/nurse_qrscan', { /* 请求配置 */ })
      .then(res => res.json())
      .then(() => {
          isProcessing = false; // 请求完成后解锁
          // 可选：停止扫描，避免重复识别
          scanner.stop(); 
      })
      .catch(() => {
          isProcessing = false; // 出错后也要解锁
      });
  }
  

• 关闭扫描库的连续扫描模式：以常用的QRCodeScanner为例，初始化时关闭连续扫描：

  const scanner = new QRCodeScanner(
      videoElement,
      handleScanSuccess,
      {
          continuous: false, // 仅扫描一次即停止
          // 其他配置项
      }
  );
  

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