如何在Slim-select选择币种后自动显示数据库中的对应价格

开发者阿泽

2026-7-21

解决方案

需要使用Ajax，因为要在不刷新页面的情况下动态从数据库获取对应币种的最新价格。具体实现分三步：

1. 后端添加价格查询接口

在Rails项目中新增一个接口，接收币种名称参数，返回对应价格：

控制器代码

# app/controllers/coins_controller.rb
class CoinsController < ApplicationController
  def get_price
    # 根据名称查询币种
    coin = Coin.find_by(name: params[:name])
    # 返回JSON格式的价格，没找到则返回0
    render json: { price: coin&.shopping_price || 0 }
  end
end

配置路由

# config/routes.rb
Rails.application.routes.draw do
  # 新增价格查询路由
  get 'coins/get_price', to: 'coins#get_price'
  # 其他路由省略
end

2. 前端绑定Slim-select的变更事件

利用你已经使用的Stimulus控制器（data-controller="slim"），编写逻辑监听选择变更，发送Ajax请求并填充价格：

// app/javascript/controllers/slim_controller.js
import { Controller } from "@hotwired/stimulus"
// 确保已引入Slim-select
import SlimSelect from 'slim-select'

export default class extends Controller {
  connect() {
    // 初始化Slim-select组件
    this.slimSelect = new SlimSelect({
      select: this.element
    })

    // 监听选择框的change事件
    this.element.addEventListener('change', this.fetchPrice.bind(this))
  }

  async fetchPrice(event) {
    const coinName = event.target.value
    const priceInput = document.getElementById('investment_shopping_price')

    // 如果未选择币种，清空价格输入框
    if (!coinName) {
      priceInput.value = ''
      return
    }

    try {
      // 发送GET请求到后端接口
      const response = await fetch(`/coins/get_price?name=${encodeURIComponent(coinName)}`)
      const data = await response.json()
      // 将返回的价格填充到输入框
      priceInput.value = data.price
    } catch (error) {
      console.error('获取币种价格失败:', error)
    }
  }
}