javascript - 在 Rails 中使用 AJAX 提交动态表单的最佳方式是什么？

Question

在我的应用程序中，我管理许多包含许多变量的工作流程。- 每个变量都有自己的值。- 每个工作流程都与 1 个或多个变量相关联。

我有一个工作流配置页面，用户将在其中选择一个工作流，然后显示其关联的变量以输入值。我遇到的问题是想出保存用户表单上的条目的最佳方法。通常我会对/variables/:id/update 之类的东西进行 ajax 调用，但在这种情况下，我想在按下保存按钮时同时更新多个变量。我的想法是在变量 Controller 中创建一个自定义方法来处理此问题，但在该尝试中，我收到了有关无法验证 CSRF token 真实性的错误。

我非常感谢我能得到的任何帮助。我觉得可能有更好的方法来做到这一点，但我有点新手，只是不知道。有人有建议吗？

customize.html.erb 中的我的表单如下所示:

<div class="col-md-10" style="background-color:yellow; height: 216px; ">
    <div class="h3">Required ContextDataDef Values:</div>
      <div class="workflow_variables">           
          <div id="placeholder"></div>                             
    </div>
</div>

我的 JavaScript 看起来像:

  $(document).on('click', '.list-group .workflow-item', function() {
    var listGroupItem$ = $(this).find('.list-group-item');
    var listGroupItemName = listGroupItem$.text();

    var workflowId$ = $(this).find('.workflow-id-string');
    var workflowIdText = workflowId$.text();


    $.getJSON('/workflows/'+ workflowIdText + '/details', function(foundFlow) {
      console.log(foundFlow);

    var flowName = foundFlow['name'];
    var flowDescrip = foundFlow['description'];

    $('#flowName').val(flowName);
    $('#flowDescrip').val(flowDescrip);
    });


    $.getJSON('/workflows/'+ workflowIdText + '/getFlowVariables', function(foundVars) {
    console.log(foundVars);

    var output="";
    for (var i in foundVars) {
        output+=" <form class='form-inline' id='variableValuesForm' data-remote='true'>" +  "<label for='@variable' style='margin-right: 5px; margin-top: 5px;'>" + foundVars[i].name + ":</label>" + "<input type='text' style='width: 170px; margin-top: 5px;' class='text small' name=" + foundVars[i].name + " id=" + foundVars[i].name + " value=" + foundVars[i].value + ">" + "<input type='text' style='width: 20px; margin-top: 5px;' class='text small' name='varID' id='varID' value=" + foundVars[i].id + ">" + "<button>Save</button>" + "</form>";
    }
    output+="";

    document.getElementById("placeholder").innerHTML=output;


    });


  });

---- 更新 ----根据评论，我更新了上面的信息:

所以当我添加 data-remote=true 时，我最终得到的是这个

 Started GET "/clients/4/customize?&rbYouTubeUsername=MyUser&varID=29" 

这很好，但我真的想调用与自定义不同的方法。我想要得到的是这样的:

 Started GET "/clients/4/updateVariable?&rbYouTubeUsername=MyUser&varID=29"

或者在完美的世界中我会得到这个:

 Started GET "/variable/29/update?&rbYouTubeUsername=MyUser"

Answer 1

我缺少的关键要素是清楚地了解添加 data-remote='true' 参数以及操作参数，以便我可以控制将表单数据发送到的 Controller 的方法。一旦我将这两个元素添加到表单中，一切就都有意义了。

 data-remote='true' action='update_variable'

现在的结果是

 Started GET "/clients/4/update_variable?rbYouTubeUsername=AnotherNewVal&varID=29"