游乐游手机版
首页/web3.0/文章详情

如何实时查询并显示所选加密货币的当前价格与行情

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

根据 slim select 选择的加密货币名称显示价格

大家都在用的虚拟币交易平台推荐:

想在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

coin = Coin.find_by("name ILIKE ?", @coin_name):接着,使用Coin模型进行查询。这里用了ILIKE进行模糊匹配,并且忽略大小写,这样即使用户输入“Bitcoin”或“bitcoin”,都能找到记录。

if coin ... else ... end:然后是一个条件判断。如果成功找到了对应的coin记录,就构造一个哈希,把该币种的price属性值放进去。这里假设你的Coin模型确实有一个price字段来存储价格。如果没找到,则返回一个coin_pricenil的哈希。

render json: data:最后,将构造好的data哈希以JSON格式渲染并返回给前端。前端CoffeeScript代码中的data.coin_price就是从这里来的。

实现后端时,别忘了这几件事:

首先,确保你的数据库中已经存在Coin模型(或你命名的其他模型),并且该模型拥有nameprice这两个属性。

其次,模型和属性的名称可以根据你的实际项目结构灵活调整。

最后,也是至关重要的一步:打开config/routes.rb文件,添加一条路由规则,将前端的请求地址映射到这个控制器动作上。例如:get '/commons/get_prices', to: 'your_controller#get_prices'。请务必将your_controller替换成你实际放置get_prices方法的控制器名称。

总结

至此,一个完整的动态价格查询功能就搭建完成了。整个过程清晰地展示了如何将Slim Select的前端交互、CoffeeScript的AJAX异步请求与Rails后端的数据库查询无缝衔接起来。其技术核心在于前后端通过AJAX进行数据交换:前端负责触发和展示,后端负责查询和提供。当然,在应用到你的实际项目时,请根据具体情况调整代码中的选择器、模型名和路由。只要确保所有依赖(如jQuery、Slim Select库)都已就位,这套方案就能流畅运行起来。

来源:https://www.php.cn/faq/1466284.html
上一篇加密货币价格实时显示教程:使用Slim Select轻松查询与展示 下一篇比特币实时价格查询与最新行情走势分析
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
特朗普对伊朗停火期限26日结束 全链网解析加密市场影响
web3.0 · 2026-06-10

特朗普对伊朗停火期限26日结束 全链网解析加密市场影响

特朗普设定的对伊朗停火期限将于26日到期。以色列方面已从美国获得相关信息,这一动态使国际社会再次聚焦中东。期限终点临近,各方密切关注局势后续发展,此类外交时间窗口常意味着新一轮决策与博弈的开始。

Gate.io上线EGLD质押挖矿 灵活赎回享7.42%年化收益
web3.0 · 2026-06-10

Gate.io上线EGLD质押挖矿 灵活赎回享7.42%年化收益

Gate上线EGLD挖矿:灵活质押,链上收益触手可及 对于寻求链上稳健收益的用户来说,现在有个值得关注的新选择。Gate交易所正式推出了EGLD挖矿产品,其设计充分考虑了灵活性与便捷性。你猜怎么着?参与门槛被降得很低,仅需1个EGLD即可起投。更关键的是,产品的赎回期被控制在最多1天之内,这为用户应

Coinbase上线Fluent代币BLEND 如何交易与质押获取收益
web3.0 · 2026-06-10

Coinbase上线Fluent代币BLEND 如何交易与质押获取收益

Coinbase上线Fluent (BLEND):新公链生态的关键一跃 全球领先的加密货币交易平台Coinbase近日宣布,将于4月23日正式上线Fluent (BLEND)的现货交易。这一举措不仅为投资者提供了接触这一新兴公链项目的便捷通道,更被视为Fluent生态发展历程中的一个关键里程碑,预示

伊朗释放积极信号愿重启面对面谈判 全链网关注地缘局势缓和
web3.0 · 2026-06-10

伊朗释放积极信号愿重启面对面谈判 全链网关注地缘局势缓和

巴基斯坦斡旋美伊谈判:停火后的外交窗口与新的挑战 4月23日,周三,霍尔木兹海峡的风波为地区外交投下了一道新的阴影。伊朗扣押两艘货船的举动,无疑为其与美国的紧张关系再添变数。然而,就在外界担忧局势升级之际,巴基斯坦的斡旋者却展现出一种审慎的乐观——他们认为,谈判的大门,依然留有缝隙。 关键在于刚刚达

SpaceX受邀参与金穹顶软件联盟 推动Web3行业标准建设
web3.0 · 2026-06-10

SpaceX受邀参与金穹顶软件联盟 推动Web3行业标准建设

SpaceX深度参与“金穹顶”计划,重塑军事卫星通信格局 近日,据业内知情人士披露,埃隆·马斯克旗下的太空探索技术公司(SpaceX)已被证实,作为核心成员参与了美国前总统特朗普时期提出的“金穹顶”计划操作系统的开发工作。该计划的核心战略目标,是构建一个高度整合、坚不可摧的军事卫星通信网络,以应对现