本文将指导开发者如何在使用 Slim Select 插件的 Rails 应用中，根据用户在下拉列表中选择的币种名称，动态地从数据库获取并显示对应的价格。我们将使用 Ajax 技术实现前后端的数据交互，并提供详细的代码示例和步骤说明，帮助您快速实现此功能。
前端实现：使用 JavaScript (CoffeeScript) 和 Ajax
首先，我们需要监听 Slim Select 的选择事件，并在事件触发时发起 Ajax 请求，从后端获取对应币种的价格。
以下是使用 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。使用 $.ajax 发起一个 GET 请求到 /commons/get_prices，并传递 coin_name 作为参数。在 then 回调函数中，从返回的 data 对象中获取 coin_price，并将其赋值给 shopping_price 输入框。$(document).on “turbolinks:load”, ->：确保在 Turbolinks 加载完成后执行代码。使用 .on(‘change’, …) 监听 investment_coin_name 选择框的 change 事件，并在事件触发时调用 coinWithPrices 函数。
注意事项：
确保已经引入 jQuery 库。根据实际情况修改选择器 (#investment_coin_name, #investment_shopping_price) 和 URL (/commons/get_prices)。如果未使用 Turbolinks，则将 turbolinks:load 替换为 DOMContentLoaded。
后端实现：Rails Controller
接下来，我们需要在 Rails Controller 中处理 Ajax 请求，从数据库中查询对应币种的价格，并将其返回给前端。
以下是 Rails Controller 中的示例代码：
def get_prices @coin_name = params[:coin_name] @coin = Coin.find_by(name: @coin_name) # 假设你有一个 Coin 模型 if @coin @coin_price = @coin.price # 假设 Coin 模型有一个 price 属性 render json: { coin_price: @coin_price } else render json: { coin_price: nil } # 或者返回一个错误信息 endend
代码解释：
get_prices action：从 params 中获取 coin_name。使用 Coin.find_by(name: @coin_name) 从数据库中查找对应的 Coin 记录。如果找到 Coin 记录，则从 Coin 记录中获取 price，并将其赋值给 @coin_price。使用 render json: { coin_price: @coin_price } 将 coin_price 以 JSON 格式返回给前端。如果未找到 Coin 记录，则返回 coin_price: nil 或者一个错误信息。
注意事项：
确保已经创建了 Coin 模型，并且 Coin 模型有一个 name 和 price 属性。根据实际情况修改模型名称和属性名称。确保在 routes.rb 文件中定义了 /commons/get_prices 路由。例如：get ‘/commons/get_prices’, to: ‘commons#get_prices’。
视图更新
在前端 JavaScript 代码中，确保使用正确的选择器来更新 shopping_price 字段。例如，在提供的代码中，应该使用 #investment_shopping_price 而不是 #investment_coin_price。
总结
通过以上步骤，您就可以在 Rails 应用中实现根据选择的币种名称动态显示价格的功能。这个教程涵盖了前端 JavaScript 代码的编写、后端 Rails Controller 的实现以及视图的更新。请根据您的实际情况修改代码，并确保所有依赖项都已正确安装。
以上就是根据选择的币种名称动态显示价格教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/100792.html
微信扫一扫 
支付宝扫一扫 
