在JavaScript和Python之间传递变量

Question

我正在尝试从JavaScript函数将整数的值传递到服务器端的Python脚本。我已经试图找到一种直接从JavaScript传递该值到Python的方法，但目前还没有成功。因此，我尝试在HTML表单中使用JavaScript函数创建一个包含int值的隐藏元素。然后使用Python Bottle框架的“POST”操作，将该值复制到Python脚本中。然而，该int被处理为NoneType，而不是int类型，因此我无法在处理脚本中使用它。以下是我的JS函数部分，它创建了名为instance的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);

HTML表单和'POST'方法

使用'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”方法添加信息时，我收到以下错误消息：。

- sreisman

---

错误在于“count”在Python的第8行被引用之前未被赋值 - 你是不是想要在count = bottle.request.forms.get("count")中将count用引号括起来？ - carpeliam

抱歉，是的，我本来想在它周围加上引号的，但是然后我收到了NoneType错误异常：TypeError('range() integer end argument expected, got NoneType.',)Traceback:Traceback (most recent call last): File "/usr/lib/python2.7/dist-packages/bottle.py", line 744, in _handle return route.call(**args) File "/usr/lib/python2.7/dist-packages/bottle.py", line 1479, in wrapper rv = callback(*a, **ka) File "mainInventory.py", line 42, in insert_newguest for num in range(1, count): TypeError: range() integer end argument expected, got NoneType. - sreisman

Answer 1

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

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

• 其次，你提供的HTML表单是硬编码的吗？如果是，那么为什么要硬编码一个表单，然后在JavaScript中再创建字段？这似乎有点奇怪。

• 第三，最重要的是，因为隐藏字段只是一个<input>，所以你需要用以下代码替换：

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

请看此答案和示例jsFiddle。现在，当您提交表单时，Python脚本中的count字段应该已填充。

另外，这种请求通常由AJAX处理。思路是相同的，只是您不需要刷新浏览器即可将计数发送到Python服务器。您可以看到一个不使用jQuery的示例在此处如何实现。

- will-hart