本教程旨在指导开发者在使用 Slim Select 插件的 Rails 应用中，如何实现选择加密货币名称后，自动从数据库获取并显示其价格的功能。通过 AJAX 请求，我们可以动态更新页面，提供更友好的用户体验。本教程将涵盖前端 CoffeeScript 代码的编写以及后端 Rails 控制器的实现。
前端实现 (CoffeeScript)
首先，我们需要监听 Slim Select 的选择事件，并在事件触发时发起 AJAX 请求，从后端获取对应加密货币的价格。假设我们使用 CoffeeScript，代码如下：
# assets/javascripts/investments.coffeecoinWithPrices = init: -> $('#investment_coin_name').on 'change', @getCoinPrice getCoinPrice: -> coin = $('#investment_coin_name').val() $.ajax url: '/commons/get_prices' data: { coin_name: coin } dataType: 'json' # 明确指定dataType为json success: (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: 监听 investment_coin_name 这个 select 元素的 change 事件，当选择的币种发生变化时，触发 getCoinPrice 函数。getCoinPrice(): 获取选中的币种名称，并使用 AJAX 发送请求到 /commons/get_prices 路径。$.ajax(): 发起 AJAX 请求，传递 coin_name 参数，并处理成功和失败的回调函数。success(): AJAX 请求成功后的回调函数，将返回的 coin_price 值设置到 investment_shopping_price input 框中。error(): AJAX 请求失败后的回调函数，在控制台输出错误信息。dataType: ‘json’: 重要: 明确指定 dataType 为 ‘json’，确保 jQuery 正确解析后端返回的数据。
注意事项:
确保 turbolinks:load 事件正确处理，避免事件绑定多次。根据实际情况修改选择器（#investment_coin_name, #investment_shopping_price）以匹配你的 HTML 结构。在 error 回调中添加适当的错误处理逻辑，例如显示错误消息。
后端实现 (Rails Controller)
接下来，我们需要在 Rails Controller 中处理 AJAX 请求，从数据库中查询加密货币的价格，并返回 JSON 格式的数据。
# app/controllers/commons_controller.rbclass CommonsController < ApplicationController def get_prices @coin_name = params[:coin_name] # 假设 Investment 模型有一个 coin_name 和 shopping_price 字段 coin = Investment.find_by(coin_name: @coin_name) if coin render json: { coin_price: coin.shopping_price } else render json: { coin_price: nil }, status: :not_found # 返回 404 如果没找到 end endend
代码解释:
get_prices: Controller 的 action，用于处理 AJAX 请求。@coin_name = params[:coin_name]: 从请求参数中获取 coin_name 的值。Investment.find_by(coin_name: @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: 如果没找到对应的币种，返回 nil 和 404 状态码。
路由配置:
确保在 config/routes.rb 文件中添加了对应的路由：
# config/routes.rbRails.application.routes.draw do get '/commons/get_prices', to: 'commons#get_prices' # 其他路由...end
总结
通过以上步骤，我们成功实现了使用 Slim Select 选择加密货币后，自动从数据库获取并显示价格的功能。 这个方案使用了 AJAX 技术，实现了页面的动态更新，提升了用户体验。请务必根据你的实际模型和字段名称调整代码。同时，注意错误处理，确保应用在各种情况下都能正常运行。 此外，可以考虑添加加载指示器，在 AJAX 请求期间给用户提供反馈。
以上就是使用 Slim Select 选择加密货币后显示价格的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516606.html
微信扫一扫 
支付宝扫一扫 
