我想编写一个onClick事件，该事件多次提交一个表单，遍历多选字段中的选定项目，每项提交一次。

我该如何编码循环？

我正在Ruby on Rails中工作，并使用remote_function()为ajax调用生成JavaScript。

解决方案

回答

我的快速答案(因为我尚未对其进行编码)将是创建另一个函数，该函数使用XMLHTTPRequest和单个调用的特定参数来创建POST。然后在onClick()处理函数内部，当我们遍历所选项目时调用该函数。

我建议我们仅使用虚拟HTML页面和javascript进行概念验证，然后尝试弄清楚如何使其在RoR中工作。

另外，为什么要尝试从浏览器进行多次调用，而不是在RoR控制器中处理循环条件？

回答

我们必须手动编写一些javascript。 Rails的生成器不会为我们做那么复杂的事情。

Prototype.js几乎可以为我们完成所有繁重的工作。我的头顶上的代码看起来像这样：(未测试)

<%= javascript_include_tag 'prototype' %>

<form id="my-form">
  <input type="text" name="username" />

  <select multiple="true" id="select-box">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
  </select>
</form>

<script type="text/javascript" language="javascript">
submitFormMultipleTimes = function() {
  $F('select-box').each(function(selectedItemValue){
    new Ajax.Request('/somewhere?val='+selectedItemValue, 
      {method: 'POST', postBody: Form.serialize('my-form')});
  });
}
</script>

<a href="#" onclick="submitFormMultipleTimes(); return false;">Clicky Clicky</a>

笔记：

• 使用原型的$ F()方法获取选定的项目值。它为多选框返回一个数组
• 使用Ajax.Request将数据作为POST发送到服务器。对于服务器，这看起来与提交常规表单完全相同
• 使用" Form.serialize"从表单中获取数据并将其粘贴在请求的正文中。如果我们正常提交表格，这将与发送的数据完全相同

回答

除非我们要修改浏览器DOM，否则我不会想到我们要这样做的原因。 (但在不完全了解我们要做什么的情况下，在这种情况下，我可能是错误的=)

我们应该能够通过一个POST从多个对象(甚至表单中嵌套的复杂对象)发送回数据。

与我们想到的任何JavaScript相比，Rails代码都有可能变得更简单，更容易编写(更容易调试！)。

如果我们需要根据用户选择的内容更新页面的不同部分，我们仍然可以通过render：update块中的RJS对DOM进行多次更新，因此这不成问题。

我们还将获得(大型)好处，即仅一次服务器往返，而不是使用多个POSTS所需的多次往返。