使用Ajax將數據發送到Rails中的控制器

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);
      }
    });
  });