Rails/Ajax/jQuery：将多个参数从 jquery 传递到 Rails 控制器

Question

我需要通过 jquery 将两个参数（选择的选项和选择的人数）从单选按钮通过 ajax 传递到 Rails 控制器，并且希望能提供任何帮助。计算定价需要两个参数（请参阅下面控制器中的@price 代码），现在我一次只能传递一个参数进行计算。

我的表单html代码如下所示：

    <%= form_for @cartedactivity, url: carted_activities_path, method: :post, remote: true do |f| %>
                    1. Choose option
                        <div class = "options">
                            <center> 
                                <% @options.each do |option| %> 
                                    <div class = "radio" id = "option_radio">
                                        <%= f.radio_button :supplier_activity_option_id, option.id, :onclick => "save_option();" %>
                                        <%= f.label :supplier_activity_option_id, option.option_name, :value => option.id %>
                                    </div>
                                <% end %> 
                            </center>
                        </div>


            <h5>2. Number of Persons</h5>
                <div class = "numbers">
                    <center>
                        <h5>
                            <%@numbers.each do |number| %>
                                <div class = "radio" id = 

"quantity_radio">
                                        <%= f.radio_button :activity_quantity, number, :onclick => "save_quantity();" %>
                                        <%= f.label :activity_quantity, number, :value => number %>
                                    </div>
                                <% end %> 
                            </h5>
                        </center>
                    </div>

                <h5>3. Start date
                <%= f.date_field :activity_date, min: (Date.today+2.days), max: (Date.today+4.months)%>
                </h5>

            <hr>

            <div id = "check-price-<%=@option%>"></div>


            <div class = "booking-btn">
                <%= f.submit "Add to Cart", class: "btn btn-book" %>
            </div>

        <% end %> 
    </div>
    </div>

<br><br>



<script> 

function save_option() 
    {var optionValue = $('input[name = "carted_activity[supplier_activity_option_id]"]:checked').val();
    if (optionValue) {
            $.ajax({
            type:    "POST",
            url:     "/supplier_activities/price_check",
            data:    { optionValue },
            success: function(post){ console.log('success') },
            error:   function(post){ console.log(this) }
          });
    }
};

function save_quantity() 
    {var quantityValue = $('input[name = "carted_activity[activity_quantity]"]:checked').val();
    if (quantityValue) {
        $.ajax({
            type:    "POST",
            url:     "/supplier_activities/price_check",
            data:    { quantityValue },
            success: function(post){ console.log('success') },
            error:   function(post){ console.log(this) }
          });
    }
};

部分 html 只是

控制器代码为：

def price_check
    @option = params[:optionValue]
    @number = params[:quantityValue]
    if !@option.blank? && !@number.blank? 
        @price = Price.find_by("supplier_activity_option_id = ? AND min_qty_for_price <= ? AND max_qty_for_price >= ?", params[:optionValue], params[:quantityValue], params[:quantityValue]).price_usd 
    else 
        @price = 100
    end 
    respond_to do |format|
            format.js {render layout: false} 
    end
end 

Answer 1

找到了解决方案 - 在每次单击任何单选按钮时都通过了两个选中的单选按钮的值。这意味着每当单击单选按钮时，两个选中按钮的值都会同时传入。

    <script> 

        function save_option() 
    {var optionValue = $('input[name = "carted_activity[supplier_activity_option_id]"]:checked').val();
    var quantityValue = $('input[name = "carted_activity[activity_quantity]"]:checked').val();
    if (optionValue) {
        $.ajax({
          type:    "POST",
          url:     "/supplier_activities/price_check",
          data:    { optionValue: optionValue, quantityValue: quantityValue },
          success: function(post){ console.log('success') },
          error:   function(post){ console.log(this) }
        });
    }
  };

  function save_quantity() 
    {var quantityValue = $('input[name = "carted_activity[activity_quantity]"]:checked').val();
    var optionValue = $('input[name = "carted_activity[supplier_activity_option_id]"]:checked').val();
    if (quantityValue) {
      $.ajax({
          type:    "POST",
          url:     "/supplier_activities/price_check",
          data:    { quantityValue: quantityValue, optionValue: optionValue },
          success: function(post){ console.log('success') },
          error:   function(post){ console.log(this) }
        });
    }
  };

    </script>