适合国内用的虚拟币交易所

• 欧易OKX >>>进入官网<<< >>>官方下载<<<
• 币安Binance >>>进入官网<<< >>>官方下载<<<

想在Rails应用里实现一个酷炫功能吗？当用户通过Slim Select下拉菜单选择一个加密货币时，页面能立刻、动态地显示出它的实时价格。这背后，是前端CoffeeScript与后端Rails控制器的一次默契配合。下面，我们就来拆解这个功能的完整实现路径，从监听选择事件到数据库查询，一步步用代码说话。

前端实现：CoffeeScript 和 AJAX

一切从前端开始。核心思路很简单：盯住那个Slim Select下拉框，一旦用户的选择发生变化，就立刻发个请求到后台去问价格。用CoffeeScript来写，代码既简洁又清晰：

coinWithPrices = ->
  coin = $('#investment_coin_name').val()
  $.ajax
    url : '/commons/get_prices',
    data : { coin_name: coin }
  .then (data) ->
    $('#investment_shopping_price').val(data.coin_price) # 修改这里

$(document).on "turbolinks:load", ->
  $('#investment_coin_name').on('change', coinWithPrices) # 修改这里

来，我们逐行看看这段代码在做什么：

coinWithPrices = ->：这里定义了一个函数，它就是整个动态查询的发动机。

coin = $('#investment_coin_name').val()：首先，获取用户在Slim Select组件中选中的那个币种名称。

$.ajax：接下来，发起一个AJAX请求。请求的目标地址是/commons/get_pricescoin作为参数coin_name一起送过去。

.then (data) ->：当后端成功响应后，会进入这个处理环节。返回的数据data里就装着我们要的价格。

$('#investment_shopping_price').val(data.coin_price)：这是关键一步！把返回的价格data.coin_price，填充到ID为investment_shopping_price的输入框里。请注意，这里的目标是更新“shopping_price”文本框，而不是读取某个元素的data属性，所以代码注释也特别提醒了这一点。

$(document).on "turbolinks:load", ->：为了确保页面在Turbolinks（一种加速页面导航的Rails技术）加载后代码也能正常运行，我们把事件绑定放在这个事件监听器里。

$('#investment_coin_name').on('change', coinWithPrices)：最后，为Slim Select元素绑定change事件。一旦选项改变，立刻触发coinWithPrices函数去获取新价格。这里同样需要注意，是监听change事件，而不是直接初始化函数。

有几个细节需要你留意：

第一，确保项目里已经引入了jQuery库，因为我们的AJAX调用和事件监听都依赖它。

第二，代码中的选择器（如#investment_coin_name和#investment_shopping_price）需要根据你实际HTML元素的ID进行替换。

第三，turbolinks:load事件能保证每次页面加载或通过Turbolinks切换页面后，事件绑定都能正确执行。

后端实现：Rails Controller

前端发出了请求，后端就得接住并处理。我们需要在Rails控制器里创建一个动作（Action），专门负责接收币种名称、查询数据库并返回价格。

def get_prices
  @coin_name = params[:coin_name]
  coin = Coin.find_by("name ILIKE ?", @coin_name) # 使用 Coin 模型查找

  if coin
    data = { coin_price: coin.price } # 假设 Coin 模型有 price 属性
  else
    data = { coin_price: nil } # 如果找不到，返回 nil
  end

  render json: data # 返回 JSON 数据
end

这段控制器代码的逻辑非常清晰：

def get_prices：定义了一个名为get_prices

@coin_name = params[:coin_name]：首先，从请求参数中提取前端传过来的coin_name。