如何通过JS向Python Flask服务器传递数组并保留结构？

问题原因 #

直接将数组拼接到GET请求的URL中时，JavaScript会自动调用数组的toString()方法，把数组转为逗号分隔的字符串，因此Flask端接收到的是字符串而非数组结构。

解决方案 #

方案1：GET请求中正确传递数组 #

通过重复参数名的格式传递数组，Flask端用getlist()方法直接获取列表。

前端代码修改

function getClassification()
{
  const modulesArray = [
    document.getElementById('module_1').value,
    document.getElementById('module_2').value,
    document.getElementById('module_3').value,
    document.getElementById('module_4').value,
    document.getElementById('module_5').value
  ]
  const marksArray = [
    document.getElementById('mark_1').value,
    document.getElementById('mark_2').value,
    document.getElementById('mark_3').value,
    document.getElementById('mark_4').value,
    document.getElementById('mark_5').value
  ]
  // 将数组转成重复参数格式：modules=xxx&modules=xxx...
  const modulesParams = modulesArray.map(item => `modules=${encodeURIComponent(item)}`).join('&');
  const marksParams = marksArray.map(item => `marks=${encodeURIComponent(item)}`).join('&');
  const fullURL = `${classifyModulesURL}?${modulesParams}&${marksParams}`;

  let xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var j = JSON.parse(this.response);
    }
  };
  xhttp.open("GET", fullURL);
  xhttp.send();
  return;
}

Flask后端代码修改

modules = request.args.getlist('modules')  # 直接获取列表类型
marks = request.args.getlist('marks')
print(modules)
print(type(modules))  # <class 'list'>
# 若需要将分数转为整数
marks = list(map(int, marks))

方案2：用POST请求发送JSON数据（更适合复杂数据） #

将数组包装为JSON对象发送，Flask端直接解析JSON获取数组。

前端代码修改

function getClassification()
{
  const modulesArray = [
    document.getElementById('module_1').value,
    document.getElementById('module_2').value,
    document.getElementById('module_3').value,
    document.getElementById('module_4').value,
    document.getElementById('module_5').value
  ]
  const marksArray = [
    document.getElementById('mark_1').value,
    document.getElementById('mark_2').value,
    document.getElementById('mark_3').value,
    document.getElementById('mark_4').value,
    document.getElementById('mark_5').value
  ]
  let xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var j = JSON.parse(this.response);
    }
  };
  xhttp.open("POST", classifyModulesURL);
  // 设置请求头为JSON格式
  xhttp.setRequestHeader("Content-Type", "application/json");
  // 转成JSON字符串发送
  const requestData = JSON.stringify({
    modules: modulesArray,
    marks: marksArray
  });
  xhttp.send(requestData);
  return;
}

Flask后端代码修改

from flask import request

# 解析JSON请求体
request_data = request.get_json()
modules = request_data['modules']
marks = request_data['marks']
print(type(modules))  # <class 'list'>
# 分数转整数
marks = list(map(int, marks))

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