javascript post表单不发送post参数

Question

我正在尝试提交如下所示的 JavaScript 表单

node.on("click", function(d){
    var name =encodeURIComponent(d.ancestors()[0].data.id) ;

    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "clickable_cluster");
    form.setAttribute("target", "_blank");
    var hiddenField = document.createElement("input"); 

  hiddenField.setAttribute("user_name", "{{user_name}}");
  hiddenField.setAttribute("thresh1", "{{thresh1}}");
  hiddenField.setAttribute("thresh2", "{{thresh2}}");
  hiddenField.setAttribute("thresh3", "{{thresh3}}");
  hiddenField.setAttribute("pthresh1", "{{pthresh1}}");
  hiddenField.setAttribute("pthresh2", "{{pthresh2}}");
  hiddenField.setAttribute("pthresh3", "{{pthresh3}}");
  hiddenField.setAttribute("node", "name");
  form.appendChild(hiddenField);
  document.body.appendChild(form);
  //window.open('', 'view');

    //window.location.assign("clickable_cluster", '_blank');
    form.submit();


  });

但是，后端的 Flask 服务器不会接收任何这些 post 参数。

@app.route('/clickable_cluster', methods=['POST'])
def clicable_cluster():

    print "request got ", request.form.items() # is []

我错过了什么？谢谢

Answer 1

您没有收到表单请求提交的任何数据的一般原因是表单请求通常会发送所有输入字段，并将其名称和值作为内容。

目前您仅在无名输入字段上设置属性。

您可以通过以下方式概括添加表单元素。 attachToForm 函数将采用表单和对象作为输入参数，并为对象内的每个属性创建适当的输入字段。

function attachToForm( form, content ) {
  Object.keys( content ).forEach( prop => {
    var input = document.createElement('input');
    input.name = prop;
    input.value = content[prop];
    form.appendChild( input );
  });
}

node.on("click", function(d){
    var name =encodeURIComponent(d.ancestors()[0].data.id) ;

    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "clickable_cluster");
    form.setAttribute("target", "_blank");

    attachToForm( form, {
      "user_name": "{{user_name}}",
      "thresh1": "{{thresh1}}",
      "thresh2": "{{thresh2}}",
      "thresh3": "{{thresh3}}",
      "pthresh1": "{{pthresh1}}",
      "pthresh2": "{{pthresh2}}",
      "pthresh3": "{{pthresh3}}",
      "node": "name"
    });
    document.body.appendChild(form);
    form.submit();
  });

我猜测您发送的值是真实数据或渲染引擎的一部分的占位符，但通常它应该可以解决问题。