在Rails应用开发中，前后端数据交互是非常常见的需求，很多时候需要把数据库中查询到的数据传递给前端的JavaScript使用，比如渲染图表、初始化前端组件等场景都需要用到这类操作。
常见的数据传递方案
1. 使用data属性传递简单数据
如果是少量的简单数据，可以直接把数据放在HTML元素的data属性中，前端通过JavaScript读取对应属性即可。这种方法适合传递少量非敏感的基础数据。
<div id="user-info" data-user-id="<%= @user.id %>" data-user-name="<%= @user.name %>"></div>
前端读取方式如下：
const userInfoDiv = document.getElementById('user-info');
const userId = userInfoDiv.dataset.userId;
const userName = userInfoDiv.dataset.userName;
console.log(userId, userName);
2. 使用gon gem传递复杂数据
当需要传递比较复杂的结构化数据，比如数组、哈希等，使用gon gem会更加方便。gon可以在控制器中直接设置需要传递给前端的数据，前端通过全局的gon对象直接读取。
首先需要在Gemfile中添加依赖并安装：
# Gemfile gem 'gon'
然后在控制器中设置数据：
class PostsController < ApplicationController
def index
@posts = Post.all
gon.posts = @posts.map { |post| { id: post.id, title: post.title, content: post.content } }
end
end
在前端JavaScript中可以直接使用：
console.log(gon.posts);
// 可以直接遍历渲染数据
gon.posts.forEach(post => {
console.log(post.id, post.title);
});
3. 提供JSON接口获取数据
如果是需要动态获取大量数据，或者数据会频繁更新的场景，可以专门提供一个JSON格式的接口，前端通过ajax请求获取数据。这种方式适合数据量大、需要异步加载的场景。
首先在路由中定义接口：
# config/routes.rb
resources :posts, defaults: { format: :json } do
collection do
get :list
end
end
然后在控制器中返回JSON数据：
class PostsController < ApplicationController
def list
@posts = Post.where(status: 'published')
render json: @posts.select(:id, :title, :created_at)
end
end
前端通过fetch请求获取数据：
fetch('/posts/list')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('获取数据失败:', error);
});
数据传递的安全注意事项
无论使用哪种方式传递数据，都需要注意安全问题，避免XSS攻击和数据泄露。
- 对输出到页面的数据进行转义，Rails默认的<%= %>标签会自动转义HTML特殊字符，不要使用<%== %>除非确认数据完全安全。
- 敏感数据不要直接传递到前端，比如用户密码、支付相关的敏感信息，即使前端不展示也不应该传递。
- 如果是通过JSON接口返回数据，需要做权限校验，确保用户只能获取自己有权限查看的数据。
- 使用gon的时候，如果数据包含用户输入的内容，需要做好转义处理，避免恶意脚本被注入到页面中。
方案选择建议
不同的场景适合不同的传递方案：
| 场景 | 推荐方案 |
|---|---|
| 少量简单静态数据 | HTML data属性 |
| 页面初始化需要的复杂结构化数据 | gon gem |
| 动态加载、大量或需要权限控制的数据 | JSON接口 |
在实际开发中可以根据具体需求选择合适的方案，同时始终将安全放在第一位，避免因为数据传递不当引发安全问题。
RailsJavaScript数据库数据传递数据安全gon_gem修改时间：2026-07-20 22:54:30