在Rails 6上呈现js.erb视图_如何在Rails 6中使用js.erb视图_在Rails 6中可以使用.js.erb文件吗？ - 腾讯云开发者社区

在Rails 6上呈现js.erb视图

基础概念

在Rails框架中，.erb文件是嵌入式Ruby（Embedded Ruby）的缩写，它允许你在HTML中嵌入Ruby代码。.js.erb文件是Rails特有的文件类型，它结合了JavaScript和ERB，允许你在JavaScript代码中嵌入Ruby代码。这种文件类型通常用于在客户端执行动态JavaScript代码，同时利用服务器端的Ruby逻辑。

类型

.js.erb文件主要分为两种类型：

局部视图（Partial Views）：用于在多个视图中复用相同的JavaScript代码片段。
完整视图（Full Views）：用于生成完整的JavaScript响应，通常用于AJAX请求。

应用场景

AJAX响应：当用户执行AJAX请求时，服务器返回.js.erb文件，客户端执行其中的JavaScript代码。
动态表单验证：在客户端实时验证表单输入，减少无效提交。
动态内容更新：在不刷新页面的情况下，更新页面的某些部分。

示例代码

假设我们有一个简单的Rails应用，包含一个用户注册表单。我们希望在用户输入用户名时，实时检查用户名是否已被占用。

控制器

# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def check_username
    @username = params[:username]
    @user_exists = User.exists?(username: @username)
    respond_to do |format|
      format.js
    end
  end
end

路由

# config/routes.rb
Rails.application.routes.draw do
  get 'check_username', to: 'users#check_username'
end

JavaScript视图

<!-- app/views/users/check_username.js.erb -->
<% if @user_exists %>
  alert("用户名已被占用！");
<% else %>
  alert("用户名可用！");
<% end %>

HTML表单

<!-- app/views/users/new.html.erb -->
<%= form_with model: @user, local: true do |form| %>
  <%= form.label :username %>
  <%= form.text_field :username, id: 'username' %>
  <%= form.submit %>
<% end %>

<script>
  document.getElementById('username').addEventListener('input', function() {
    var username = this.value;
    fetch('/check_username?username=' + encodeURIComponent(username))
      .then(response => response.text())
      .then(data => eval(data));
  });
</script>

常见问题及解决方法

JavaScript代码未执行：
- 确保.js.erb文件正确命名，并且控制器响应格式为format.js。
- 检查浏览器控制台是否有错误信息。

实例变量未传递：
- 确保在控制器中正确设置了实例变量，并且在.js.erb文件中可以访问。
- 使用<%= @variable %>而不是<% @variable %>来输出变量值。
AJAX请求失败：
- 检查路由配置是否正确。
- 确保服务器端没有抛出异常，并且返回正确的响应格式。

通过以上步骤，你可以在Rails 6上成功呈现和使用.js.erb视图，实现动态的JavaScript代码生成和执行。