javascript + Flask - 通过 post 请求将 json 数组传递到服务器的正确方法？

Question

我必须使用 post 请求将 json 数组传递给服务器:

<form action="../../../submit/" method='post' style="margin-top:-10px" id="submitBox">

    <input class="attr" type="text" name="task_url" value= "annotate/{{task_name}}/{{taskid}}/{{frame_idx+1}}" hidden>
    <input class="attr" type="text" name="frame_id" value= "{{frame.id}}" hidden>
    <input class="attr" type="text" name="boxes_info" value = "" hidden id="boxes_info">
    <button class="btn btn-default" id="submit" class="attr_sub">
       <span class="glyphicon glyphicon-ok-circle"></span>
       Submit
    </button>
</form>

这是我创建 json 数组并将其传递给输入值的方法

d3.select('#submit').on('click', function(){
  var boxes = [];
  var box     = {};
  d3.selectAll('rect').each(function(){
    var rect = d3.select(this)
    box['xmin']   = rect.attr('x');
    box['ymin']   = rect.attr('y');
    box['width']  = rect.attr('width');
    box['height'] = rect.attr('height');
    box['label']  = rect.attr('class');
    boxes.push(JSON.stringify(box));

  })
  boxes = JSON.stringify(boxes);
  d3.select('#boxes_info').attr('value',boxes);
})

在服务器端我获取表单数据:

bboxes          = request.form["boxes_info"]
bboxes = json.loads(bboxes)
print bboxes[0]['xmin']     // error: string indices must be integers
print bboxes[0][0]          // return '{'


print bboxes
//[u'{"xmin":"433.9936102236422","ymin":"4.8","width":"404.2108626198083","height":"461.96","label":"person"}', u'{"xmin":"433.9936102236422","ymin":"-18.2","width":"404.2108626198083","height":"20","label":"person"}', u'{"xmin":"490.73482428115017","ymin":"291.84","width":"286.517571884984","height":"197.44","label":"handbag"}', u'{"xmin":"490.73482428115017","ymin":"268.84","width":"286.517571884984","height":"20","label":"handbag"}']

看来我必须再次json.loads('bboxes[0]')。我认为我的代码出了问题。谁能告诉我正确的方法是什么？

Answer 1

看起来您在客户端上执行了两次 JSON.stringify 操作，这就是为什么您需要在服务器上执行两次 json.loads 操作。

您的代码(简化):

d3.select('#submit').on('click', function(){
  d3.selectAll('rect').each(function(){
    ...
    boxes.push(JSON.stringify(box));  // stringify each box

  })
  boxes = JSON.stringify(boxes); // stringify array with stringified boxes
})

相反，尝试在结果数组上使用一次stringify:

d3.select('#submit').on('click', function(){
  d3.selectAll('rect').each(function(){
    ...
    boxes.push(box);  // don't stringify heare

  })
  boxes = JSON.stringify(boxes); // stringify the array
})