使用 Slim Select 选择加密货币后显示价格的教程

本教程旨在指导开发者在使用 Slim Select 插件的 Rails 应用中，如何实现选择加密货币名称后，自动从数据库获取并显示其价格的功能。通过 AJAX 请求，我们可以动态更新页面，提供更友好的用户体验。本教程将涵盖前端 CoffeeScript 代码的编写以及后端 Rails 控制器的实现。

前端实现 (CoffeeScript)

首先，我们需要监听 Slim Select 的选择事件，并在事件触发时发起 AJAX 请求，从后端获取对应加密货币的价格。假设我们使用 CoffeeScript，代码如下：

# assets/javascripts/investments.coffee

coinWithPrices =
  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()

代码解释:

1. coinWithPrices.init(): 初始化函数，在页面加载完成后调用。
2. $('#investment_coin_name').on 'change', @getCoinPrice: 监听 investment_coin_name 这个 select 元素的 change 事件，当选择的币种发生变化时，触发 getCoinPrice 函数。
3. getCoinPrice(): 获取选中的币种名称，并使用 AJAX 发送请求到 /commons/get_prices 路径。
4. $.ajax(): 发起 AJAX 请求，传递 coin_name 参数，并处理成功和失败的回调函数。
5. success(): AJAX 请求成功后的回调函数，将返回的 coin_price 值设置到 investment_shopping_price input 框中。
6. error(): AJAX 请求失败后的回调函数，在控制台输出错误信息。
7. dataType: 'json': 重要: 明确指定 dataType 为 'json'，确保 jQuery 正确解析后端返回的数据。

注意事项:

• 确保 turbolinks:load 事件正确处理，避免事件绑定多次。
• 根据实际情况修改选择器（#investment_coin_name, #investment_shopping_price）以匹配你的 HTML 结构。
• 在 error 回调中添加适当的错误处理逻辑，例如显示错误消息。

后端实现 (Rails Controller)

接下来，我们需要在 Rails Controller 中处理 AJAX 请求，从数据库中查询加密货币的价格，并返回 JSON 格式的数据。

Fotor AI Face Generator

Fotor 平台的在线 AI 头像生成器

下载

# app/controllers/commons_controller.rb

class 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
  end
end

代码解释:

1. get_prices: Controller 的 action，用于处理 AJAX 请求。
2. @coin_name = params[:coin_name]: 从请求参数中获取 coin_name 的值。
3. Investment.find_by(coin_name: @coin_name): 根据 coin_name 从 Investment 模型中查找对应的记录。 注意: 这里使用 find_by，如果找不到记录会返回 nil，避免抛出异常。
4. render json: { coin_price: coin.shopping_price }: 将查询到的 shopping_price 以 JSON 格式返回。
5. render json: { coin_price: nil }, status: :not_found: 如果没找到对应的币种，返回 nil 和 404 状态码。

路由配置:

确保在 config/routes.rb 文件中添加了对应的路由：

# config/routes.rb
Rails.application.routes.draw do
  get '/commons/get_prices', to: 'commons#get_prices'
  # 其他路由...
end

总结

通过以上步骤，我们成功实现了使用 Slim Select 选择加密货币后，自动从数据库获取并显示价格的功能。 这个方案使用了 AJAX 技术，实现了页面的动态更新，提升了用户体验。请务必根据你的实际模型和字段名称调整代码。同时，注意错误处理，确保应用在各种情况下都能正常运行。 此外，可以考虑添加加载指示器，在 AJAX 请求期间给用户提供反馈。