Ruby on Rails-jQuery使用AJAX獲取數據

Question

我有以下模型：

create_table "mouldings", :force => true do |t|
  t.string   "suppliers_code"
  t.datetime "created_at"
  t.datetime "updated_at"
  t.string   "name"
  t.integer  "supplier_id"
  t.decimal  "length",         :precision => 3, :scale => 2
  t.decimal  "cost",           :precision => 4, :scale => 2
  t.integer  "width"
  t.integer  "depth"
end

當用戶在表單上選擇成型時，我想通過ajax獲取成型的成本，並使用它來獲取使用JavaScript生成的報價。 這是表單中的選擇標簽：

<select id="order_item_moulding_1_id" name="order_item_moulding_1[id]">
  <option value="">Select a moulding 1</option> 
  <option value="1">123 589 698</option> 
  <option value="2">897 896 887</option> 
  <option value="3">876 234 567</option>
</select>

這是javascript文件的一部分：

$(document).ready(function () {

  $('#order_item_moulding_1_id').change(function () {
    var moulding_1_price = ;
  });

});

如何使用Ajax設置變量moulding_1_price？

Answer 1

如果要通過ajax在rails控制器中執行此操作，只需將每個選項的值設置為要查找的成型ID，然后使用jQuery的ajax方法將其發送到控制器：

 var theVal = $('#order_item_moulding_1_id').val();
 var theURL = '/someUniqueRoutingKeywordSuchAsMouldingAjax/' + theVal;


        $.ajax({
          url: theURL

        });

然后，確保在您的routes.rb文件中設置了一條路由：

 match 'someUniqueRoutingKeywordSuchAsMouldingAjax/:id', :to => 'yourMouldingsController#ajaxMouldings'

並在yourMouldingsController中定義一個自定義方法：

def ajaxMouldings
@moulding = Moulding.find(params[:id])

end

默認情況下，這將呈現ajaxMouldings.js.erb。 因此，在您的視圖中，請確保您具有該名稱的文件。 那是嵌入式javascript，因此您可以使用它來替換頁面上要顯示該信息的div：

// in ajaxMouldings.js.erb
// be sure to escape any dynamic values!
 alert('Hey, it worked!');

var theHTML = '<div class="moulding_title"><%= escape_javascript(@moulding.title) %></div><div class="moulding info"><%= escape_javascript(@moulding.info) %></div>';

$('#someUniqueDiv').html(theHTML);

顯然，您將需要采取一些防范措施來防止不良數據等……但是，這應該可以使您走上正確的道路。

Answer 2

您可以執行ajax調用來檢索數據，也可以使用HTML5數據屬性。

對於第二種解決方案，您可以將data-price屬性添加到options標簽，因此如下所示：

<option value="1" data-price="123">123 589 698</option> 
<option value="2" data-price="456">897 896 887</option> 
<option value="3" data-price="789">876 234 567</option>

然后，在您的JS文件中：

$(document).ready(function () {

  $('#order_item_moulding_1_id').change(function () {
    var moulding_1_price = $(this).find('option:selected').attr('data-price');
  });

});