想在Rails应用里实现一个丝滑的功能吗？比如，用户通过Slim Select下拉菜单选择一个加密货币，页面就能立刻、自动地显示出它的实时价格。这背后，其实是前端监听与后端查询的一次默契配合。本教程就带你一步步实现这个动态更新价格的完整流程，从前端的CoffeeScript事件处理，到后端的Rails控制器响应，确保你能获得流畅的用户体验。

欧意 www.okx.com 若打不开请 点击跳转 下载请点击 [→] 官方app下载 [←]

币安 www.binance.com 若打不开请 点击跳转 下载请点击 [→] 官方app下载 [←]

前端实现 (CoffeeScript)

一切从用户的选择开始。我们的任务是：当Slim Select的选项变化时，立刻去“问”后台要数据。下面这段CoffeeScript代码就是实现这个逻辑的核心。

# assets/ja vascripts/investments.coffeecoinWithPrices =init: ->$('#investment_coin_name').on 'change', @getCoinPricegetCoinPrice: ->coin = $('#investment_coin_name').val()$.ajaxurl: '/commons/get_prices'data: { coin_name: coin }dataType: 'json' # 明确指定dataType为jsonsuccess: (data) ->$('#investment_shopping_price').val(data.coin_price) # 将价格填充到对应的 input 框中error: (jqXHR, textStatus, errorThrown) ->console.log("AJAX Error: " + textStatus) # 错误处理$(document).on "turbolinks:load", ->coinWithPrices.init()

来拆解一下这段代码的关键点：

coinWithPrices.init()：这是初始化函数，确保页面加载完成后，监听器才被挂载上去。

$('#investment_coin_name').on 'change', @getCoinPrice：这里监听了ID为investment_coin_name的下拉菜单的change事件。一旦选项改变，getCoinPrice函数就被触发。

getCoinPrice()：这个函数是动作的发起者。它先获取用户选中的币种名称，然后通过$.ajax()向服务器端的/commons/get_prices路径发起一个GET请求，并把币种名称作为参数传过去。

success()：这是请求成功后的回调函数。当后端返回JSON数据，这里会取出其中的coin_price值，并把它填充到ID为investment_shopping_price的输入框里，页面上的价格就这样“活”了起来。

error()：当然，网络请求总有出错的可能。这个回调函数负责在浏览器控制台打印错误信息，方便调试。

dataType: 'json'：这一点很重要。明确告诉jQuery我们期望服务器返回的是JSON格式的数据，这样它才能正确解析，避免一些意想不到的解析错误。

有几个细节需要特别注意：

第一，由于可能使用了Turbolinks，我们通过turbolinks:load事件来绑定初始化函数，这能有效防止事件被重复绑定。

第二，代码中的选择器（如#investment_coin_name）需要和你项目实际的HTML元素ID完全匹配，否则监听会失效。

第三，目前的错误处理只是在控制台输出，对于生产环境，你可能需要考虑更友好的用户提示，比如弹出一个Toast通知。

后端实现 (Rails Controller)

前端发出了请求，后端自然要接住并给出回应。我们需要在Rails中创建一个控制器动作，专门处理这个查询价格的AJAX请求。

# app/controllers/commons_controller.rbclass CommonsController < ApplicationControllerdef get_prices@coin_name = params[:coin_name]# 假设 Investment 模型有一个 coin_name 和 shopping_price 字段coin = Investment.find_by(coin_name: @coin_name)if coinrender json: { coin_price: coin.shopping_price }elserender json: { coin_price: nil }, status: :not_found # 返回 404 如果没找到endendend

看看后端逻辑是如何运转的：

get_prices：控制器中定义的这个动作，就是前端请求的终点。

@coin_name = params[:coin_name]：首先，它从请求参数中拿到前端传过来的具体币种名称。

Investment.find_by(coin_name: @coin_name)：接着，它用这个名称去Investment模型（这里假设你的价格数据存在这个模型里）中查找对应的记录。使用find_by方法是个好习惯，因为即使找不到记录，它也会返回nil，而不会抛出异常导致程序中断。

render json: { coin_price: coin.shopping_price }：如果找到了记录，控制器就把该记录的shopping_price字段值，包装成一个JSON对象返回给前端。

render json: { coin_price: nil }, status: :not_found：如果数据库里没有对应的币种，这里不仅返回一个空的coin_price，还附带了一个404状态码。这能让前端更清晰地知道“未找到”是一种明确的错误状态，而不仅仅是空数据。

最后，别忘了给这个动作配上“门牌号”——路由。确保你的config/routes.rb文件中有这么一行：

# config/routes.rbRails.application.routes.draw doget '/commons/get_prices', to: 'commons#get_prices'# 其他路由...end

总结

至此，一个从选择到展示的动态价格查询功能就搭建完成了。整个方案的核心在于前后端的分离与协作：前端负责即时捕捉用户意图并优雅地展示结果，后端则专注于数据的准确查询与提供。

当然，这只是一个基础框架。在实际应用中，你还需要根据自己项目的模型结构和字段名进行适配。错误处理的完善程度也直接关系到应用的健壮性。更进一步，你还可以考虑在AJAX请求发出时，添加一个加载动画，给用户即时的操作反馈，体验会因此再上一个台阶。