在Javascript和Python之间传递变量

Question

我试图将javascript函数中的整数值传递给服务器端python脚本。我试图找到一种方法将这个值直接从javascript传递给python但还没有成功，所以我试图创建一个隐藏元素，其中包含我的html表单中的my值与javascript函数。然后在Python Bottle框架中使用动作'POST'，我试图将值复制到我的python脚本。但是，int被处理为NoneType而不是int，因此我不能在处理脚本中使用它。我的JS函数中使用int命名实例创建元素的部分如下

function newItem(){
  instance++;

  var oldInput = document.getElementById("itemInfo");
  var parent = oldInput.parentNode;
  var newDiv = document.createElement("div");

  var item = document.createElement("INPUT");
  var qty = document.createElement("INPUT");
  var color = document.createElement("INPUT");
  var count = document.createElement("HIDDEN");

  item.name = "item" + instance;
  qty.name = "qty" + instance;
  color.name = "color" + instance;
  count.value = instance;
  newDiv.appendChild(item);
  newDiv.appendChild(qty);
  newDiv.appendChild(color);
  newDiv.appendChild(count);

带有“POST”方法的HTML表单

<form method ="post" class="form" action = "/newguest" method = 'post'>
   Name: <input type="text" name="name"/>


   <p>Item: <input type="text" name="item"/> 
   Qty: <input type="text" name="qty"/>
   Color: <input type="text" name="color"/></p>
   <div class="itemInfo" id="itemInfo"></div>
    <input type ="button" value="Add Item" onclick="newItem();"/>


   <p>Phone: <input type="text" name="phone"/>
   Email: <input type="text" name="email"/>
   Artwork: <input type="file" name="file"/>
   <p>Quote: <input type="text" name="quote"/></p>
 </p>
   <p>Notes: <textarea cols="40" rows="10"></textarea>
 </p>
   <input type="submit" value='Add Order'/>
 </form>

最后是服务器端的python脚本

 @bottle.route('/newguest', method = 'POST')
def insert_newguest():
    name = bottle.request.forms.get("name")
    email = bottle.request.forms.get("email")
    item = bottle.request.forms.get("item")
    qty = bottle.request.forms.get("qty")
    color = bottle.request.forms.get("color")
    count = bottle.request.forms.get(count)
    itemDict = dict()
    qtyDict = dict()
    colorDict = dict()
    for num in range(1, count):

    itemkey = "item" + str(num)
    qtyKey = "qyt" + str(num)
    colorKey = "color" + str(num)
    itemDict[itemKey]= bottle.request.forms.get("item"+str(num))
    qtyDict[qtyKey] = bottle.request.forms.get("qty"+str(num))
    colorDict[colorKey] = bottle.request.forms.get("color"+str(num))

尝试使用“POST”方法添加信息时，收到以下错误：

Answer 1

您可能收到此消息，因为您的隐藏字段尚未正确创建。

• 首先，我看不到您在上面的代码中实际将newDiv添加到DOM中。

• 其次 - 您提供硬编码的HTML表单？如果是这样，那你为什么要硬编码一个表单，然后在javascript中再次创建字段？这看起来有点奇怪。

• 第三，也是最重要的一点，因为隐藏字段只是<input>，您需要替换

  var count = document.createElement("HIDDEN");
  

  使用：

  var count = document.createElement("INPUT");
  count.setAttribute('type', 'hidden');
  count.setAttribute('name', 'count');
  count.setAttribute('value', my_count_variable);
  

请参阅this answer和示例jsFiddle。现在，当您提交表单时，应在Python脚本中填充count字段。

顺便说一句，这种请求通常由AJAX处理。这个想法是相同的，只是你不需要刷新浏览器来将你的计数发送到Python服务器。您可以看到how to do this without jQuery here的示例。