Question

我是JS和Rails的新手，因此最近在Rails环境中使用Ajax面临许多困难。如果您为我的项目开发做出了贡献，我将不胜感激。我想做的是，一旦用户从模式中选择了数据，我想将选定的数据发送到控制器中的某个动作，以便我可以处理数据。我不太确定该从哪里开始。请帮助大家:(非常感谢

视图：

 <form id= "selected_form" action="" method="">
      <div id= "selected_form">
        <p id="checkids"></p>
      </div>
    </form>
    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <div>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Select Task</h4>
            </div>
            <div class="modal-body">
              <fieldset>
                <% @tasks.each do |task|%>
                  <div>
                    <label><input type="checkbox" value="<%=task.id%>" name="selected"><%=task.title%></label>
                  </div>
                <% end %>
              </fieldset>
            </div>
            <div class="modal-footer">
              <button type="button" id="save" class="btn btn-default" data-dismiss="modal">Save</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
          </div>
        </div>
      </div>
    </div>

JS

<script>
  $(function(){
    $(document).ready(function(){

    $("#save").click(function(){
      var checkedItem = [];
      $.each($("input[name='selected']:checked"), function(){
        checkedItem.push($(this).val());
      });
      $('#values').html("selected values are: " + checkedItem.join(", "));
      $.ajax({
        type: "POST", // request method for your action like get,post,put,delete
        url: "/users/<%= current_user.id %>/test", // route of your rails action
        data: {checked_items: checkedItem.join(", ")}, // attach data here you will get this data in your controller action with params[:checked_items]
        success: function(data, textStatus, jqXHR){}, // do whatever you want when it success
        error: function(jqXHR, textStatus, errorThrown){}
      })
    });

    });

  });
      </script>

Answer 1

请检查下面的脚本

<script>
  $(function(){
    $(document).ready(function(){

    $("#save").click(function(){
      var checkedItem = [];
      $.each($("input[name='selected']:checked"), function(){
        checkedItem.push($(this).val());
      });
      $('#values').html("selected values are: " + checkedItem.join(", "));
      $.ajax({
        type: "POST", // request method for your action like get,post,put,delete
        url: "/things", // route of your rails action
        data: {checked_items: checkedItem }, // attach data here you will get this data in your controller action with params[:checked_items]
        success: function(data, textStatus, jqXHR){...}, // do whatever you want when it success
        error: function(jqXHR, textStatus, errorThrown){...}
      })
    });

    });

  });

</script>

Answer 2

为简单起见，您可以将控制器的rails路径作为数据集属性注入。例如

<form method="post" data-url="<%= tasks_path %>">

在js部分

  $('#save').on('click', function (e) {
    e.preventDefault();
    $.ajax({
      type: $(this).method || "GET",
      url: this.dataset.url,
      data: $(this).serialize(),
      success: function (response) {
        console.log(response)
      },
      error: function (error) {
        console.log(error);
      }
    });
  });

使用Ajax将数据发送到Rails中的控制器

2 个答案: